How to Scroll layers with multiple rate on website - javascript

I found this website with an effect that I would like to replicate. To see what I am talking about go here:
http://www.rowtothepole.com/
When scrolling through the webpage you can see that the iceberg layer scrolls at a different rate as the text box on top of it. I would like to know how they are doing this.

In their http://www.rowtothepole.com/release/includes/js/parallax.js
there are code to shift the body's background image and an outer div's background image, which are for the icebergs and for the clouds:
Event.observe(window, "scroll", function() {
var offset = document.viewport.getScrollOffsets();
$(document.body).setStyle({
'backgroundPosition': 'center -' + (offset[1] / px_scroll_amt) + 'px'
});
if (xhr_support) {
$("outer").setStyle({
'backgroundPosition': 'center -' + (offset[1] / (px_scroll_amt / 3)) + 'px'
});
}
});

Related

How can I resize my image proportionally

How can I resize my image like they did here website.
When you zoom in that picture where it says "Radiant Power" , it does not go bigger. Just stays the same size compared to the other elements on the site.
Can you guys give me some tips on how to do that, I can't seem to find the answer anywhere.
Here's my website: site
It's on a free domain so it will load slow.
As you can see I made the big picture work ,because it's 100vw so it's much easier to handle... it stays the same when you zoom in. Now i want the little one to be resized when I zoom in and keep its aspect ratio like that website I showed.
Here's the jsfiddle
That's how I did the large picture resize:
$(function () {
var scr=screen.width;
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else{
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
$(window).resize(function () {
if($(window).width() > scr){
$("#wall").width(scr + 'px');
$("#content").width(scr + 'px');
$("#body-wrap").width(scr + 'px');
$("header").width(scr + 'px');
$("ul:eq(0)").width(scr + 'px');
}
else {
$("#wall").width('100vw');
$("#wall").height('auto');
$("#body-wrap").width('100vw');
$("header").width('100vw');
$("ul:eq(0)").width('100vw');
}
});
});
You just make image scale on percent of total width/height like this:
https://jsfiddle.net/bhdpmhgc/1/
#test{
width: 10%;
height: 10%;
}
<img src="https://images.cdn.autocar.co.uk/sites/autocar.co.uk/files/porsche-911-s-gen2-rt-2016-244.jpg" id="test">

Parallax effect white space

My parallax effect adds white space to the top of the page, when scrolling.
My JavaScript:
<script>
$(window).scroll(function() {
var scrolledY = $(window).scrollTop();
$('.bg').css('background-position', 'left ' + ((scrolledY)) + 'px');
});
</script>
No scroll:
When scrolling:
This code adds a vertical offset in pixels on scroll so it goes right: when the image shifted down there is nothing to display at the top so you need to set background-repeat or control the offset value and avoid to set new value after it goes out of bounds. And also you need to multiply scrolledY value by -1 to makes image on a background moving up on a page scroll down like in a parallax effect.
$(window).scroll(function() {
var scrolledY = -1 * $(window).scrollTop();
$('.bg').css('background-position', 'left ' + (scrolledY) + 'px');
});
Also you can control the speed of background offset by division of vertical value by two or something like that. Here is an example: https://jsfiddle.net/panamaprophet/9pkrxjh0/

Parallax Effect Adjustment for individual DIVs

I created a parallax effect, as it was described here:
Is there a way to make parallax work within a DIV
This method works pretty well, but I have a problem with it. My page is basically composed of alternating DIVs. White DIVs with text and DIVs with a picture in it, which moves with the parallax effect. This works pretty well, unless, that I have to manually adjust the position of each picture DIV. Here is the code from the header:
<script type="text/javascript">
$(window).scroll(function () {
parallax();
});
function parallax() {
var ev = {
scrollTop: document.body.scrollTop || document.documentElement.scrollTop
};
ev.ratioScrolled = ev.scrollTop / (document.body.scrollHeight - document.documentElement.clientHeight);
render(ev);
}
function render(ev) {
var t = ev.scrollTop;
var y = Math.round(t * 2/3) - 100;
$('#ff-section01').css('background-position', 'center ' + y + 'px');
$('#ff-section03').css('background-position', 'center ' + (y - 1000) + 'px');
$('#ff-section05').css('background-position', 'center ' + (y - 1700) + 'px');
$('#ff-section07').css('background-position', 'center ' + (y - 2750) + 'px');
}
</script>
As you can see, each section got another vertical position in the background-position value at the bottom. 0, 1000, 1700, 2750. This works well so far, but as soon as the intermediate Text DIVs change in height, this method doesn't work, as the value is always calculated from the top of the page. The HTML of one section looks like this:
<div class="ff-section03" id="ff-section03"></div>
So very simple, and combined with the CSS:
.ff-section03 {
width: 100%; height: 550px;
position: relative;
background: url('system/urbansolutions.jpg') center -300px no-repeat;
}
Also very simple. What can I do, that the calculations are not dependent of the page height? I basically don't want to subtract a superficial number from the background-position, so that the parallax effect works, not dependent of the location on the website.
Thanks a lot!
Sebastian

Parallax - help making vertical position start at 200px rather than 0px

I'm using a precoded Parallax JQuery as part of a Wordpress theme called Parallax by Studiopress. It works fairly well, but I end up missing the top half of the image when scrolling and I'd like the user to be able to see that as well when they scroll down. Currently, the background-position starts at "50% 0px" and the px goes into negative figures when you scroll the page. I figure if I set it to start at 200 or 300px the majority of the image can be viewed. However, I can't set the CSS as that gets overridden by JQuery.
I'm fairly new to JQuery so I'm wondering if there's any pointers or method that can be given to help me?
This is the code :
jQuery(function ($) {
// Enable parallax and fade effects on homepage sections
$(window).scroll(function () {
scrolltop = $(window).scrollTop()
scrollwindow = scrolltop + $(window).height();
$(".home-section-2").css("backgroundPosition", "50% " + -(scrolltop / 6) + "px");
if ($(".home-section-4").length) {
sectionthreeoffset = $(".home-section-4").offset().top;
if (scrollwindow > sectionthreeoffset) {
// Enable parallax effect
backgroundscroll = scrollwindow - sectionthreeoffset;
$(".home-section-4").css("backgroundPosition", "50% " + -(backgroundscroll / 6) + "px");
}
}
})
});
For the top image - change scrolltop to scrolltop = $(window).scrollTop() + -1000 The larger the number makes the starting px larger as well.
Every other image requires a duplicate of scrolltop called scrolltop2 which does not contain the number. This is referred to in scrollwindow.
scrolltop2 = $(window).scrollTop()
scrollwindow = scrolltop2 + $(window).height();
Then add the number to backgroundscroll
eg: backgroundscroll = scrollwindow - sectionthreeoffset + -1500;

How do i make "facebook zoom"

Im making a website, and i love the functionality of this google chrome extension call Facebook Photo Zoom # https://chrome.google.com/extensions/detail/elioihkkcdgakfbahdoddophfngopipi
I think the essential idea behind the extension is when you hover over the thumbnail, it grabs the original image file and displays it in full view. If the image is too big, then it will be position on the corners or the top and bottom bars of the window. If it is not too big, it will float next to the mouse position.
The logic behind it i understand, but the actually coding seems to be a bit daunting. I guess the only parts of it i dont understand is how do you code the positions of the expanded images and make them contract/expand when you move your mouse to the left/right. Thanks
13 zoom jquery plugins in here. Choose the best for your needs:)
on mouseover you create big image with
css({position: 'absolute', left: e.pageX, top: e.pageY})
on mousemove you update the left and top in the same way.
check also:
http://api.jquery.com/event.pageY/
http://api.jquery.com/css/
http://api.jquery.com/event.pageX/
Check out this preview image tooltip which is similar to what that Chrome extension does, but you have to provide it the url to the thumbnail and full sized image. Here is the original blog post.
I modified the script to adjust the image size to fit the distance between the cursor and right browser edge. It's not perfect, but it works. Here is a demo.
/*
* Image preview script
* powered by jQuery (http://www.jquery.com)
*
* written by Alen Grakalic (http://cssglobe.com)
*
* for more info visit http://cssglobe.com/post/1695/easiest-tooltip-and-image-preview-using-jquery
*
*/
this.imagePreview = function(){
/* CONFIG */
xOffset = 10;
yOffset = 20;
// these 2 variable determine popup's distance from the cursor
// you might want to adjust to get the right result
/* END CONFIG */
$('a.preview').hover(function(e){
this.t = this.title;
this.title = '';
var p, c = (this.t != '') ? '<br/>' + this.t : '';
$('body').append('<p id="preview"><img src="' + this.href + '" alt="Image preview" />' + c + '</p>');
// load image and get size
p = $('#preview');
p
.fadeIn('fast')
.find('img').load(function(){
// get image dimensions after it has been loaded
p.data('widths', [ $(window).width(), p.find('img').width() ]);
// set image to 100% to fit in preview window
$(this).width('100%');
position(e);
});
},
function(){
this.title = this.t;
$('#preview').remove();
});
$('a.preview').mousemove(function(e){
position(e);
});
var position = function(e){
var w, prevw = $('#preview'),
w = $.data( prevw[0], 'widths' );
if ( w ) {
prevw
.css('top', e.pageY + yOffset)
.css('left', e.pageX + xOffset)
.css('max-width', (e.pageX + prevw.outerWidth() > w[0]) ? w[0] - e.pageX - xOffset : w[1] || 'auto' );
}
};
};
// starting the script on page load
$(document).ready(function(){
imagePreview();
});
See the Kabbar Image Zoomer at http://www.ideabonus.com/Kabbar/index.html

Categories