Vertical Loop for Images

Description

• Items move slowly upwards.
• view demo – password: abc
• buy me a coffee

#1. Install Code

#1.1. First, make sure you added some Image Blocks

#1.2. Hover on top right of section > Click EDIT SECTION

#1.3. at Design > Anchor Link > enter word: image-portfolio

#1.4. Hover on Page where you use Image Blocks > Click Gear icon

#1.5. Click Advanced > Paste this code

• If you use Personal/Basic Plan and your plan doesn’t support Injection, see #3.1

<!-- 07.26c06v2 Vertical Loop for Images -->
<script>
window.LoopVerticalConfig = {
  enabled: true,
  sectionSelector: 'section[id*="image-portfolio"]',
  gridSelector: '.fluid-engine',
  viewportHeight: '120vh',
  speed: 40,
  direction: 'up',
  infiniteScroll: false,
  pauseOffscreen: true,
  respectReducedMotion: true,
  loopGap: 0
};
</script>
<script src="https://code.beaverhero.com/imageblock/0726c06v2verticalloopimg.js">
</script>

#2. Customize

#2.1. To change section height, change line 07

viewportHeight: '120vh',

#2.2. To change image speed, change line 08

speed: 40,

#2.3. To enable loop, change line 10

infiniteScroll: false,

to

infiniteScroll: true,

#3. Other

#3.1. If you use Personal/Basic Plan and your plan doesn’t support Injection, you can add a Markdown Block to current page

Then add this code into Markdown

<script>
window.LoopVerticalConfig = {
  enabled: true,
  sectionSelector: 'section[id*="image-portfolio"]',
  gridSelector: '.fluid-engine',
  viewportHeight: '120vh',
  speed: 40,
  direction: 'up',
  infiniteScroll: false,
  pauseOffscreen: true,
  respectReducedMotion: true,
  loopGap: 0
};
</script>
<script src="https://code.beaverhero.com/imageblock/0726c06v2verticalloopimg.js">
</script>