Jump to content
Sign in to follow this  
98sfsdf8

Cycle through different sized images on scroll

Recommended Posts

Hi all,

I am trying to change through images when scrolling, (and I understand that maybe the jquery is a bit messy but it seems to be working) but i would like:
- to be able to have images of different heights and widths, not all the same size (as it is now).
- vertically/horizontally centered.

Here is a fiddle: https://jsfiddle.net/postcolonialboy/WTkqn/486/

Thanks!

HTML:

<div id="contentwrapper">
      <div class="centreme">
        <img src="https://picsum.photos/200/200?image=1" id="animation" />
        <img class="hidden" src="https://picsum.photos/200/200?image=1" />
        <img class="hidden" src="https://picsum.photos/200/200?image=2" />
        <img class="hidden" src="https://picsum.photos/200/200?image=3" />
        <img class="hidden" src="https://picsum.photos/200/200?image=4" />
        <img class="hidden" src="https://picsum.photos/200/200?image=5" />
        <div id="bottommark"></div>
      </div>
    </div>

CSS:

body,
      html {
        height: 7000px;
        margin: 0;
        background-color: grey;
      }

      .hidden {
        position: absolute;
        top: -9999999px
      }

      #bottommark {
        position: absolute;
        bottom: 0;
      }

      #contentwrapper {
        width: 100%;
        height: 100%;
        position: fixed;
      }

      .centreme {
        position: fixed;
        width: 200px;
        /* the image width */
        height: 200px;
        /* the image height */
        top: 50%;
        left: 50%;
        margin-top: -100px;
        /* half the image height */
        margin-left: -100px;
        /* half the image width */
      }

JS:

$(document).ready(function() {
        var a = $(document).height();
        var b = a - $("#bottommark").position().top;
        $(window).scroll(function() {
          var e = $(document).height();
          var f = $(window).scrollTop();
          var c = e - $("#bottommark").position().top - f;
          var d = b / 5;
          $("span").html(c);
          if (c > d * 4) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=1")
          }
          if ((c < d * 4) && (c > d * 3)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=2")
          }
          if ((c < d * 3) && (c > d * 2)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=3")
          }
          if (c < d * 2 && c > d * 1) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=4")
          }
          if (c < d) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=5")
          }
        })
      });

 

Edited by 98sfsdf8

Share this post


Link to post
Share on other sites
On 7/4/2018 at 10:58 PM, 98sfsdf8 said:

 


$(document).ready(function() {
        var a = $(document).height();
        var b = a - $("#bottommark").position().top;
        $(window).scroll(function() {
          var e = $(document).height();
          var f = $(window).scrollTop();
          var c = e - $("#bottommark").position().top - f;
          var d = b / 5;
          $("span").html(c);
          if (c > d * 4) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=1")
          }
          if ((c < d * 4) && (c > d * 3)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=2")
          }
          if ((c < d * 3) && (c > d * 2)) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=3")
          }
          if (c < d * 2 && c > d * 1) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=4")
          }
          if (c < d) {
            $("#animation").attr("src", "https://picsum.photos/200/200?image=5")
          }
        })
      });

 

A future tip: Give your variable names something descriptive.  Assigning single letters like that makes things more difficult to understand.  When writing code it's readability is the most important thing.

Edited by rbrtsmith

Share this post


Link to post
Share on other sites

Create an account or sign in to comment

You need to be a member in order to leave a comment

Create an account

Sign up for a new account in our community. It's easy!

Register a new account

Sign in

Already have an account? Sign in here.

Sign In Now
Sign in to follow this  

  • Similar Content

    • By Randallrbaker
      Here is my website. www.vibe432.com  please check every link and every possible page ans let ne know whats wrong. Id  evenlike to have the responsiveness looked at too. Im having someone do the css and html for me so i need to tell them exactly what wrong and why it's wrong. 
    • By jwbjnwolf
      Hi, I have a PHP array of all folders in a directory, and creating a list of divs from them all with a specified class.
      I have this jQuery script (CodePen link) that just simply requires me to specify the class of what elements I want to paginate, as well as have a place holder element for the pager below. That works fine. No other things needed.
      But as of right now, this is a very basic script where the pager numbers just keep adding up. What I want to add is the previous/next/first/last buttons as well as say a limit of 5 numbers shown.
      How can I add this to the script or is there any scripts with this already, that work just as simply like this, just dynamically paginating content of a specified class without doing anything more? All I can seem to find are scripts requiring bootstrap, databases, editing the html to differ each item or putting the dynamic content into the javascript file.
      Thanks, Jase
    • By charlyanderson
      Hello everyone :)
      I am working on a grid type layout and really having troubles and hoping someone might be able to help.
      The background colours should be full width whilst the content should be contained and have a max-width. I have managed to extend the background colours outside of the content areas by absolutely positioning them. This however, doesn't work when there is more than two blocks per row.
      I have attempted this about 20 times and cannot figure out how to achieve this on a responsive website. Can anyone help.
      Attached is a very basic example of what I am trying to achieve.
      Thanks in advance.

    • By Luke Ottey
      @Seth and I are working on a website that uses Envira-gallery and are unable to use CSS code to move the image caption (which is currently located in a white font in the top left) of the front-page gallery images to below the bottom border of the image (in order too see the caption you have to first click on the image). We are looking for a way to center the caption below the image in the same spot regardless of what the viewport size is. Here is a link to the page: https://webdesignstaging.site/firstfloorflow/
      Any help would be wonderful, thanks so much!
    • By carloswebwdf
      Hello !!
      Following the instructions from the site 'W3Schools', I created one dropdown menu in javascript, like shows in the link below:
      http://www.terezanininha.com.br/Exemplo_proprio_4.html
      But what I need, for exampple, after click in the button and show de list, at mouseover on the link 'Link2' for example, shows another list in the right
      side with more link options !!
      How Can I do that ??
      Wating answer...
  • Recently Browsing

    No registered users viewing this page.

  • Member Statistics

    • Total Members
      58,416
    • Most Online
      4,970

    Newest Member
    angelsphone09
    Joined
  • Forum Statistics

    • Total Topics
      65,740
    • Total Posts
      452,901
×