victa / scrolly Goto Github PK
View Code? Open in Web Editor NEWPROJECT IS NOT MAINTAINED - Super simple and easy to use parallax plugin for jQuery
Home Page: http://lab.victorcoulon.fr/javascript/scrolly/
scrolly's People
Contributors
Stargazers
Watchers
Forkers
jentanbernardus noconstruct vidhatanand leison kublaj sim1cq sergslon lunow caiomaioral ajpinto impulcity agenciadroopi jonmspencer mse-planning rozrobsite okamen brenothales justrhysism matiasnamendola web5design phele aczepod cesardanielhg en4ce atdhemuhaxhiri sergioofarrill linebouncer sys-git giovannif23 nvquynh leonardsmalls andy737 suarezkrac kingweewee acenkus twinseamus arnp adxmm hadesain jordan-carl kieronkeenan vishnumitraha webbycreatives markoblagotinsek developerroom ragingzebra pollenbrands kauphycake rockarloz organnoise newbird marck2040 degico kevinrodbe colorwalf gencer blastup maraks immanuelsun pgersoene tradealot lm-411 ramper officiallysamik degt juankennaugh hassann201 flamilton zenseo antoniodesouza tuannguyenminh2086 aleszu balmat carlaspets geometr zaptronic sheadawson burl olszak94 leeyoongu eko910817 thealeksey cocoalab zahari-angelov nicktaporuk arebe ron-yu urbangrau openube ezefranca tqangxl fatooo0116 webin squashriddle 0067 mahmudsajib pixelslave jenniferkuo f3tusz dwmorrisdevscrolly's Issues
html syntax error
in the example there's an extra
Do not evenly move images in Internet Explorer
If during the mouse scrolling your images are twitching in the IE browser, apply the additional css code for your page:
/* Edge */
@supports ( -ms-accelerator:true )
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
}
/Ie 10-11/
@media screen and (-ms-high-contrast: active), (-ms-high-contrast: none)
{
html{
overflow: hidden;
height: 100%;
}
body{
overflow: auto;
height: 100%;
}
}
Bottom position
Is there a way to support bottom positioning? I have image elements that I would like positioned with bottom: 0 and slowly update that with negative values to see more of the the tops of these image. It looks like the only output of this is top positioning.
Skewed element - text got blured
Let's skew the wrapper of the background and unskew the content with the same degree in reverse.
what happens is, the text got blurred for about 10seconds after stopping to scroll.
any idea to solve it?
thanks!
start scroll position
Hi
I was experimenting with your example of scrolly & have one problem, I can't solve:
I set the parallax bg-imges to fullscreen with 'center center' & cover, but as soon as scrolling starts, they're repositioned. What am I missing here?
Thanks for your work & help!
<!doctype html><html><head>
<title>Scrolly: a simple jQuery parallax plugin</title>
<link rel="stylesheet" href="css/styles.css">
</head>
<body>
<section id="bottle">
<article>
<h1>Blabla</h1>
</article>
<div class="parallax" data-velocity="-.3"></div>
<div class="parallax" data-velocity="-.5" data-fit="525"></div>
</section>
<section id="story-freext">
<div class="parallax" data-velocity="0"></div>
</section>
<script src="http://code.jquery.com/jquery-1.7.1.min.js"></script>
<script src="../jquery.scrolly.js"></script>
<script>
$(document).ready(function(){
$('.parallax').scrolly({bgParallax: true});
});
</script>
</body></html>
section {
min-height: 1000px;
position: relative;
width: 100% !important;
min-width: 1000px;
margin: 0;
padding: 0;
overflow: hidden;
}
section:nth-of-type(1){background:whitesmoke;height:200px;}
section:nth-of-type(2){background:black;height:1600px;}
#bottle>div:nth-of-type(1){
background-image: url(../img/bottle.jpeg);
background-position: center center;
background-size: cover;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
height: 1200px;
position:absolute;
top:0;left:0;
width:100%;
}
#bottle>div:nth-of-type(2) {
background: url(../img/nike.png);
background-position: center center;
background-size: ;
background-repeat: no-repeat;
background-attachment: fixed;
margin: 0;
height: 1600px;
position:absolute;
top:0px;left:0px;
width:100%;
}
#story-freext>div:nth-of-type(1) {
background-color: red;
margin: 0;
height: 1600px;
position:absolute;
width:100%;
top:0;left:0;
}
section h1{color:#4F9426;width:300px;font-size:65px;margin-bottom:14px;}
section p{color:black;width:300px;}
section article{ position:absolute;top:40px;left:40px;width:900px;z-index:4;}
.parallax-item{position:absolute;z-index:5;top:40px;left:400px;}
Wordpress
Hi,
i am having trouble getting this to work in my wordpress theme. How can i properly enqueue the script?
Horizontal Parallax?
Any chance this will be supporting both horizontal and vertical parallax movement? It would be amazing to be able to make an object move across a diagonal path as you scroll (like a comet across the sky)
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.