I am following this parallax tutorial that uses only jQuery. I slightly modified the HTML:
<section id="home" data-type="background" data-speed="10">
<article data-speed="1">One</article>
<article data-speed="20">Two</article>
</section>
<section id="about" data-type="background" data-speed="10">
</section>
css
#home {
background: url(home-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
}
#home article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
#about {
background: url(about-bg.jpg) 50% 0 repeat fixed; min-height: 1000px;
height: 1000px;
margin: 0 auto;
width: 100%;
max-width: 1920px;
position: relative;
-webkit-box-shadow: 0 0 50px rgba(0,0,0,0.8);
box-shadow: 0 0 50px rgba(0,0,0,0.8);
}
#about article {
height: 458px;
position: absolute;
text-align: center;
top: 150px;
width: 100%;
}
And the jQuery:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
This code moves everything in a section at the same speed, but I would like to have the <article> text move at a variable speed different (defined in the <article data-speed>) from the background image.
I wasn't sure how to move the text because background-position is for images, and I tried adjusting top but that didn't have any effect. I also tried setting transform: translateZ(); on the article css, but this also did not work.
How can I add different speeds to the <article> texts? I'd also like to stick to jQuery in the spirit of the example.
try modifying markup always wrapping the article with a section, for ex.:
<section id="about" data-speed="4" data-type="background">
<article>One</article>
</section>
<section id="home" data-speed="20" data-type="background" >
<article >Two</article>
</section>
edit--explanation
this is the source of your parallax jquery script:
$(document).ready(function(){
// Cache the Window object
$window = $(window);
$('section[data-type="background"]').each(function(){
var $bgobj = $(this); // assigning the object
$(window).scroll(function() {
// Scroll the background at var speed
// the yPos is a negative value because we're scrolling it UP!
var yPos = -($window.scrollTop() / $bgobj.data('speed'));
// Put together our final background position
var coords = '50% '+ yPos + 'px';
// Move the background
$bgobj.css({ backgroundPosition: coords });
}); // window scroll Ends
});
});
as you can tell what it's doing is slowing down the scroll of the section[data-type="background"] with a factor of data('speed');
This kind of script is built in a way to have one layer of parallax, if you want more parallax layers check wagersfield's parallax script
Related
I'm trying to replicate this overlay phone effect from this website:
https://www.beemit.com.au/
Basically, when you scroll down, the contents inside the fixed div (phone) also change.
I cannot grasp my head around the revealing effect created when you scroll down. I have only managed to create the fixed div and the various sections on the webpage.
Here's a simple version of the overlay-on-scroll.
There are 3 elements, the first image you want to be shown in the 'phone', the second image which gradually gets revealed and the footer element. They have different z-indexes so footer is behind both first and second and second is behind first.
The phone has a fixed position so it doesn't move on scrolling. The footer is placed relative to the body (or whatever container you have) just out of view at 100%.
We introduce a simple event listener on scrolling which tests whether there is an overlap between the footer and the phone. If there is then we set the height of the first image element to be its original height minus the overlap. This reveals the bottom part of the second element.
Without seeing your code I can't tell whether you need more sophistication (for example, you have to be aware of stacking contexts if your phone and footer are not in the same one).
const footer = document.querySelector('.footer');
const first = document.querySelector('.first');
const firstBottom = first.getBoundingClientRect().bottom;
const firstHeight = firstBottom - first.getBoundingClientRect().top;
function checkOverlay() {
const top = footer.getBoundingClientRect().top;
if ( top < firstBottom) {
first.style.height = firstHeight - firstBottom + top + 'px';
}
}
body {
width:100vw;
height: 100vh;
overflow-y: scroll;
overflow-x: hidden;
}
.first, .second {
position: fixed;
top: 50%;
left: 50%;
border: 1px solid black;
width: 20vmin;
height: 30vmin;
overflow:hidden;
}
.first {
background-image: linear-gradient(magenta, pink);
z-index: 0;
}
.second {
background-image: linear-gradient(cyan, lime);
z-index: -1;
}
.footer {
width: 100%;
height: 50%;
background-image: linear-gradient(red,blue);
position: relative;
top: 100%;
z-index: -2;
}
<body onscroll="checkOverlay();">
<div class="first"></div>
<div class="second"></div>
<div class="footer"></div>
</body>
This site I am developing is using HTML5, CSS3, Bootstrap 4, and Jquery. I would like to have a scroll effect on a full-screen background-image that is at the very top of my page (100vh hero banner type thing). I am trying to gradually increase the contrast (css filter: contrast(some%)) of an image as the user scrolls down (its fine if the image is completely unrecognizable by the time it leaves viewport).
I have some Jquery that somewhat does the effect I am looking for, however I would like the effect to be more gradual.
The main issue I am having is that when the user scrolls back to the top of the page the contrast value gets set to 0% leaving a completely grayed out image. What I would like is for the contrast to gradually decrease back to normal (100%) as the user scrolls back up all the way to the top of the page.
I have set up a very simplified codepen. I couldn't get a css background-image url value to reference an external link from codepen, so I am targeting the effect on a full screen image ().
Thanks!
Link to the Pen: [codepen-link][1]
[1]: http://codepen.io/wdzajicek/pen/MVovZE
See code below in snippet
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = $(window).scrollTop();
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
There is the main problem in $(window).scrollTop(); it will return 0 value
that's why contrast value gets set to 0% leaving a completely grayed out image
var pixelstop = $(window).scrollTop();
replace the code with
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
don't just copy this code please understand thanks.
$(document).ready(function (){
$(window).scroll(function(){
var pixelstop = 100+100*$(window).scrollTop()/$(window).height();
console.log(pixelstop);
$(".myimage ").css("filter", "contrast(" + pixelstop + "%)");
});
});
.header {
height: 100vh;
}
.myimage {
position:absolute;
top: 0;
left: 0;
min-width: 100%;
width; 100%;
z-index: -1;
}
.jumbotron {
position: relative;
background-color: unset;
margin-top: 150px;
z-index: 999;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.8.3/jquery.min.js"></script>
<header class="header text-center">
<img src="https://raw.githubusercontent.com/wdzajicek/portfolio/master/assets/img/header-bg.jpg" class="myimage" alt="">
</header>
100 is default value of filter contrast not 0. that's why the background is grey out because it reaches zero.
Here is my html and css code snippet:
.clouds {
background-image: url('http://placehold.it/1200x1200');
background-repeat: no-repeat;
display: block;
}
.cloud-1 {
width: 138px;
height: 83px;
position: absolute;
left: 200px;
top: 350px;
}
.cloud-2 {
width: 100px;
height: 52px;
position: absolute;
left: 625px;
top: 400px;
background-position: -935px -9px;
}
.cloud-3 {
width: 110px;
height: 58px;
position: absolute;
left: 450px;
top: 350px;
background-position: -1033px -6px;
}
<div id="animations">
<div class="clouds cloud-1"></div>
<div class="clouds cloud-2"></div>
<div class="clouds cloud-3"></div>
<div class="clouds cloud-4"></div>
<div class="clouds cloud-5"></div>
<div class="clouds cloud-6"></div>
<div class="clouds cloud-7"></div>
<div class="clouds cloud-8"></div>
<div class="clouds cloud-9"></div>
<div class="clouds cloud-10"></div>
<div class="clouds cloud-11"></div>
<div class="clouds cloud-12"></div>
<div class="clouds cloud-13"></div>
</div>
What I want to achieve is to move clouds to the website edges when user scrolls down. My clouds is one image sprite, and each cloud is positioned absolutely. Sorry, but I am new to web development and still need to learn a lot.
This is best achieved by Javascript, I think. By using JQuery, this should not be too hard.
Check how far you are scrolled, first:
var scrollPercent = 100 * $('body').scrollTop() / ($('body).height()
that gives you the percentage you've scrolled down. Then, you could do something like:
$('.cloud-1').css('left', (200 / scrollPercent) + 'px');
That will set the image 200 px from left at the start, towards 2 px to the left if the user is down the page.
Update those values on scroll:
$('body').on('scroll', function(){
// methods described above here
}
note
The code is not tested, its a heads up in the right direction. Adjust to your needs, and check out the jquery docs.
your code snippet is not working to me (because you used relative path to your image...) but you should probably do it like that (replace the height with the height the user has to scroll)
JQuery :
$(window).scroll(function() {
var scr = $(window).scrollTop();
var height = 300px;
if(scr > height) {
$(document.body).addClass('fix-clouds'); /* add the class on scroll */
} else {
$(document.body).removeClass('fix-clouds'); /* remove when we go back to top */
}
});
CSS :
.fix-clouds clouds {
your CSS
}
Hello I am working on a slideshow with thumbnails.
My slideshow works but I'd like to have a horizontal slide of my thumbnail since I don't have enough space to display them all.
It could be on hover or on click of a button prev/next.
My code needs to be in javascript only no librairies.
Here is where I'm at, the entire code is in one page.
-- EDIT
Here is my HTML
<div class="controls">
<a class="previous" href=""><img src="images/fleche_g.jpg" alt=""></a>
<div class="thumbs">
<ul id="thumbs">
</ul>
</div>
<a class="next" href=""><img src="images/fleche_d.jpg" alt=""></a>
</div>
My CSS
.controls {
width: 658px;
height: 76px;
margin-top: 10px;
}
#thumbs {
display: inline-block;
overflow: hidden;
height: 76px;
position: relative;
z-index: 99;
}
.controls .previous, .controls .next {
float: left;
width: 51px;
height: 76px;
position: relative;
z-index: 999;
}
.controls .previous {
background: transparent url('images/fleche_g.jpg') 0 0 no-repeat;
}
.controls .next {
background: transparent url('images/fleche_d.jpg') 0 0 no-repeat;
}
And the 2 simple functions I have tried calling onClick of the a prev/next button.
// Move thumbs to the left
function left() {
document.getElementById('thumbs').style.left = '-124px';
}
// Move thumbs to the right
function right() {
document.getElementById('thumbs').style.right = '-124px';
}
So far nothing works at all. What am I missing?
I think this is what you need to solve your problem. 1 new function getLeft(); the rest is adaptions of existing functions and css.
I think this ought to work for more images, so the client has to push the right-button multiple times to get to the end.
You might also want extra calculations to restrict the range; so all the images are not beyond the right or left of the .wrapper-thumbs (feel free to ask me).
Notice: maybe you want left and right to do the opposite (I've seen both) ; just swap the 500 <-> -500
Or do you only want as many images so that only 1 push of the button gets you totally left or right?
css:
#slideshow .controls .wrapper-thumbs {
overflow: hidden;
position: relative; /* this means: the upper-left corner of <div class="wrapper-thumbs"> is now the the new base/zero (for style.left) for all the children with position: absolute */
float: left; /* this is so the left- and right-button are kept in place */
margin: 0;
width: 556px;
height: 76px;
}
#thumbs {
display: inline-block;
width: 900px;
height: 76px;
position: absolute; /* So now, the new base of #thumbs is set to the base/zero of <div class="wrapper-thumbs"> */
z-index: 99;
}
script:
// function reads style.left; removes 'px'; returns the numeric value.
function getLeft() {
var left = document.getElementById('thumbs').style.left;
return Number(left.substr(0, left.length - 2)); // .substr removes the 'px'
}
// Move thumbs to the left
function left() {
var currentLeft = getLeft();
var newLeft = currentLeft -500;
document.getElementById('thumbs').style.left = newLeft + 'px';
}
// Move thumbs to the right
function right() {
var currentLeft = getLeft();
var newLeft = currentLeft +500;
document.getElementById('thumbs').style.left = newLeft + 'px';
}
Im trying to add a footer at the bottom of this content that doesn't overlay the content but moves it up.
The only way I can see it working would be something like, when browser is at the bottom remove 'fixed' class on the left red '#work'.
js fiddle DEMO
Updated js fiddle DEMO
HTML
<div id="header-block">
Header-block, this sits here in the background
</div>
<div id="content">
<div id="work">
This content should be fixed when at the top
</div>
<div id="description">
This content should scroll -
</div>
</div><!-- end content -->
<div id="footer">
This should appear at the bottom
</div>
CSS
body {
margin: 0px;
padding: 0px;
}
#header-block {
background: green;
width: 100%;
position: fixed;
z-index: 1;
height: 300px;
top: 0;
}
#content {
margin-top: 300px;
width: 100%;
position: relative;
z-index: 2;
}
#work {
background: red;
width: 50%;
height: 100vh;
float: left;
position: absolute;
}
#description {
background: blue;
width: 50%;
height: 1200px;
float: right;
font-size: 30px;
}
#footer {
background: black;
width: 100%;
height: 100px;
position: absolute;
z-index: 3;
bottom: 0;
}
If I understand your question correct, this should do the trick (although it depends very much on JavaScript unfortunately).
// Fix work column on scroll
contentStart = $("#content").offset().top ;
contentSize = $("#content").height() ;
window.onscroll = function(){
if( window.XMLHttpRequest ) {
var position=window.pageYOffset;
// calculate the position of the footer and the actual seen window
var docViewTop = $(window).scrollTop();
var docViewBottom = docViewTop + $(window).height();
var elemTop = $("#footer").offset().top;
if ( position > 300 && !(docViewBottom >= elemTop)) {
$('#work').css({'position':'fixed', 'top':'0', 'height':'100vh'});
} else {
// if the footer is visible on the screen
if(docViewBottom >= elemTop) {
$('#work').css({ 'top': 0 - (docViewBottom - elemTop) }); // scroll the #main div relative to the footer
} else {
$('#work').css({'position':'relative', 'top': 'auto'}) ;
}
}
}
}
For further informations about the calculations, perhaps this question on stackoverflow is useful.
Edit: Andrew Haining posted his answer in between of my answer, perhaps give his link a try and maybe it's a better (more proper) solution. Unfortunately I haven't actualised this page when I was testing your code in JSFiddle and I didn't see his answer.
If you want to use my script, make sure you can test it with different resolutions. It works just fine for my resolution in JSFiddle, I didn't test any other.
I'm not 100% sure what you want, but if you remove the position: absolute and the bottom: 0 from the footer, and put a div with class='clearboth' above the footer, it seems to do what you need.
CSS
.clearboth {
clear: both;
}
This is a drawing of what I see on your fiddle;
Do you want the red and the blue to always be touching the black?
I don't see the red overlying the black
You should use jQuery to add a class containing the position:fixed value when the scroll position of the page is less than the inline position of the #work div. Once it scrolls past the position, remove the class and have the element fall back in line.
You can achieve this using the following jQuery methods.. .scrollTop() .offset().top() and $(window).height().
This tutorial will give you an understanding of what you need to do to achieve the necessary results, you will just have to change the calculation slightly using $(window).height(), $('#footer').height() and a few other changes to get what you desire.
Based on the question you asked i think this is what you mean. The red div should be fixed when it gets to the top but be absolute when it is below the top for scrolling and the black footer should be below the red while scrolling, check this code i have done for you. just add this jquery script and run it.
<script type="text/javascript" src="js/jquery.js"></script>
<script>
$(document).ready(function() {
$(window).scroll(function () {
console.log($(window).scrollTop());
if ($(window).scrollTop() >= 322) {
$('#footer').css("z-index","1");
$('#work').css(
{
"background": "red",
"width": '50%',
'height': '100vh',
'float': 'left',
'position': 'fixed',
'top': '0'
});
}
if ($(window).scrollTop() <= 322)
{
$('#work').css(
{
"background": "red",
"width": "50%",
"height": "100vh",
"float": "left",
"position": "absolute"
});
};
});
});
</script>
If not exactly a parallax, this is somewhat close to how parallax works, containers moving at different speeds, and some containers sitting fixed or scrolling when they attain a particular top/bottom offset in the viewport.
There's plugin that can do it. Skrollr
You can use Skrollr along with skrollrcss, and it'll make sure how the containers take position on screen based on scrolltop of the window and the container specifically.