Questions tagged [skrollr]

Skrollr is a stand-alone parallax scrolling library for mobile (Android + iOS) and desktop.

Skrollr is much more than "just" parallax scrolling. It's a full-fledged scrolling animation library. In fact, you can use it and still have no parallax scrolling at all. Skrollr leverages HTML5 and CSS 3. It is not dependent on jQuery - it's just plain JavaScript.

Official site: http://prinzhorn.github.io/skrollr/

Github: https://github.com/Prinzhorn/skrollr

361 questions
3
votes
1 answer

issues with skrollr on element with overflow: scroll

I'm trying to make a nifty single page with some animations with the help of skrollr. For a very simple example, there are three slides, the slides are just fixed positioned at 100% width and height, the last one has an overflow: auto on it so one…
archytect
  • 2,975
  • 4
  • 18
  • 27
3
votes
2 answers

Drawing SVG on scroll with skrollr

I'm trying to draw a simple svg as the user scrolls down on the viewport. I'm using skrollr because it's meant to be simple, but I can not make it work.
ohmmho
  • 132
  • 1
  • 12
3
votes
1 answer

Skrollr, flipping image on direction change

I have an image of an animal facing left that, when scrolling, moves left -> flips horizontally -> moves right -> flips horizontally, etc. The issue is when the user scroll up, the animal goes backwards. On direction === 'up' I'm trying to get the…
DT.DTDG
  • 745
  • 1
  • 9
  • 28
3
votes
0 answers

Zoom in on background image using Skrollr

This post is based off of this tutorial which allows a background image to increase in size (from the center) as a user scrolls down the page. I have this test page I've created trying to do the same thing. A key difference is that my image is…
itsclarke
  • 7,496
  • 6
  • 29
  • 42
3
votes
2 answers

Issue: Horizontal scrolling effect with Skrollr

I want to create an horizontal animation controlled by the skrollr. Scrolling down, the elements of my page have to move from left to right of my container. Assuming that my elements have all the same width, I set the scrolling data from 100% to 0%…
3
votes
1 answer

Skrollr Mobile, Overflow Hidden;

I have read the documentation over at skrollr. My site is wrapped in the
..site here...
And all my fixed elements are located below that, outside of those tags. In my regular desktop view it works fine, but when I…
Peege151
  • 1,518
  • 1
  • 20
  • 40
3
votes
3 answers

Skrollr adding white space

I have tried everything. I am exhausted from reading 4-5 pages on google trying to find a fix that works for me. My problem is persistent even when I use the skrollr examples (not saying they did something wrong, I know I am just not understanding…
user3746995
  • 57
  • 2
  • 6
3
votes
3 answers

Change Image on Scroll Position

I would like to change an image on a certain scroll position. For example: Scroll 100px show img1.jpg Scroll 200px show img2.jpg Scroll 300px show img3.jpg Here I found an example what I mean. Any ideas?
l00per
  • 431
  • 4
  • 7
  • 18
3
votes
0 answers

How can I get skrollr.js to "snap" to certain vertical locations?

I'm using skrollr in an attempt to create a fullpage.js-like effect plus parallax. The issue is that when I skroll --er, scroll through each "slide" of content, sometimes the scroll interval is offset by an amount that makes it impossible to align…
ksoo
  • 494
  • 1
  • 3
  • 15
3
votes
1 answer

Skrollr, Safari, fixed position lags

I'm playing with parallax at the moment and have an issue: Here's the markup

Wickd
  • 156
  • 2
  • 11

3
votes
1 answer

Skrollr: make div fixed so it centers once I've gotten to the correct position

It's my first time using skrollr so the last few hours I've been trying lots of things in order to get to grips with it. The plan is to have a 3d image of a building and as I scroll the building will turn 360degrees. I'm currently using a car as an…
user1788364
  • 1,051
  • 3
  • 17
  • 32
3
votes
0 answers

Convert SVG Image to Path - to use with skrollr

I recently came across Skrollr, an interesting library to achieve a parallax effect. I am using it to control some opacities and would be ideal to make a 'path' ( provided as an SVG image - including coloring and stroke width etc - from the…
Ziyan Junaideen
  • 2,914
  • 5
  • 38
  • 67
3
votes
1 answer

Skrollr choppy if images are used?

I'm using the skrollr plugin to create a parallax web page for iOS. If I just use text, it is extremely fluid, and very fast. If I include a background image with CSS or an inline image with HTML, the scrolling suddenly becomes very choppy. Is…
Caleb
  • 797
  • 2
  • 10
  • 29
2
votes
1 answer

Recreating a parallax zoom effect with SVG Image mask

I'm trying to recreate the effect found at the bottom of this page where the words "REFORM CO" Zoom in to reveal a background image with a headline. I attempted to recreate this effect myself using skrollr but I've hit a wall. ideally I'd like the…
JRodriguez
  • 27
  • 5
2
votes
0 answers

Skrollr image flickers and some images doesnt load in chrome

I am using Skrollr librabry. In the start it works fine,but as I'm scrolling down,I am experiencing flickering and images do not load. The content of my website are just images. Works fine on firefox, but not on Chrome. Could you please help me. I…
1
2
3
24 25