^

Scroll down to watch
your plant grow

sun
moon
pink pot with dirt

How it Works

  1. Insert the jQuery Google CDN before the closing body tag in your HTML file. This adds the jQuery library to your project.
     <script src="http://ajax.googleapis.com/ajax/libs/jquery/2.0.3/jquery.min.js"></script>
    				
  2. Download the Skrollr plugin zip file HERE and include the skrollr.min.js file before the closing body tag in your HTML file.
     <script src="scripts/skrollr.min.js"></script>
    			
  3. Add the following code to your corresponding HTML, CSS, and Javascript files. Skrollr uses the data attributes in the HTML code to modify what happens when you scroll, so the first Javascript function initializes the plugin. When scrolled past 2900px, the plant changes from a fixed to absolute position.
    
    
    
    .scrollWrapper {
    	height: 100vh;
    	position: fixed;
    	top: 30px;
    	left: 0;
    	width: 100%;
    }
    
    .sun, 
    .moon {
    	position: absolute;
    	top: 16%;
    	right: 24%;
    }
    
    .sunbeam {
    	position: absolute;
        right: -106%;
        top: 17%;
        z-index: -10; 	
    }
    
    .pot-02 {
    	width: 266px;
    	position: absolute;
    	top: 463px;
    	left: 50%;
    	transform: translate(-50%, 0);
    	margin: 0 auto;
    }
    
    #leftLeaf,
    #rightLeaf,
    #stem,
    #bulb {
    	position: absolute;
    	z-index: -10;
    }
    
    #leftLeaf {
    	width: 111px;
    	height: 94px;
    	background-image: url('../images/left-leaf.png');
    	top: -75px;
    	left: 25px;
    }
    
    #rightLeaf {
    	width: 111px;
    	height: 94px;
    	background-image: url('../images/right-leaf.png');
    	top: -75px;
    	right: 25px;
    }
    
    #stem {
    	top: -85px;
    	left: 50%;
    	transform: translate(-50%,0);
    }
    
    #bulb {
    	top: -200px;
    	left: 50%;
    	transform: translate(-50%,0);
    }
    
    
    
    $(document).ready(function () {
        const s = skrollr.init();
        $(window).scroll(function(){});
    });
    
    $.fn.followTo = function (pos, offset) {
        var $this = this,
            $window = $(window);
    
        $window.scroll(function (e) {
            if ($window.scrollTop() > pos) {
                $this.css({
                    position: 'absolute',
                    top: pos + offset
                });
            } else {
                $this.css({
                    position: 'fixed',
                    top: 0
                });
            }
        });
    };
    
    const $container = $('.scrollWrapper');
    
    $container.followTo(2900, 0);