there are many website that have the "parallax" scrolling effect. But I would like to start simple by letting various images fly in as I am scrolling down.
A simple illustration:
The image will actually fly in as the user is scrolling (start flying in on visible, on scroll), but I'm okay if the image fly's in directly when the image is visible to the user (trigger fly in on visible)
How can this be accomplished? Are there any demo's, library's, tutorails etc. available? Is there a specific name for this?
There are a lot of great parallax tools available. If you are looking for tutorials, my company and I list some at http://potentpages.com/parallax-tutorials/
Some of the main methods used to create parallax websites are:
Javascript (without any libraries)
jQuery (and libraries that go on top of jQuery like Stellar.js)
Skrollr.js
Jarallax
CSS (without any javascript)
My company also created a quick and simple tutorial on how to create a parallax tutorial with javascript (no extra libraries needed) at http://potentpages.com/parallax-scroll-tutorial/
I hope this helps.
html:
<body>
<div id="section1"><h1>section1</h1></div>
<div id="section2"><h1>section2</h1></div>
<div id="section3"><h1>section3</h1></div>
</body>
css:
*{ margin: 0; padding: 0;}
#section1{ width: 100%; height: 650px; background: url("http://www.wallsave.com/wallpapers/1280x960/abstact-red/186157/abstact-red-abstract-balls-186157.jpg");}
#section2{ width: 100%; height: 650px; background: url("http://wallpaper-fun.ophibian.com/wallpapers/wallpaper_08.jpg");}
#section3{ width: 100%; height: 650px; background: url("http://wonderfulengineering.com/wp-content/uploads/2014/01/Technology-Wallpaper-6.jpg");}
h1{ color: chartreuse; text-align: center; line-height: 650px;}
#section2 h1{ color: #fff;}
js:
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.9.1/jquery.min.js"></script>
<script>
$( window ).scroll(function() {
var val = $(window).scrollTop();
$("#val").text(val);
$("#section1").css({"background-position":"-"+val*2+"px 50%"});
$("#section2").css({"background-position":"50% -"+val*2+"px"});
$("#section3").css({"background-position":val*2+"px 50%"}); });
</script>
follow this way to help you to create and understand about parallax website
http://learning-day.blogspot.in/2014/04/how-to-create-own-parallax-website.html
Take a look at this tutorial: http://blog.themeforest.net/tutorials/create-a-funky-parallax-background-effect-using-jquery/
I prefer to use lazyload for your problem, so the image will be loaded when it reaches the viewport.
Add an eventlistener for page scrolling and when one of these object become visible, animate them. This can be implemented with jQuery like this:
$(window).scroll(function(){
var scrollTop = $(this).scrollTop();
$('.flyIns').each(function(i, element){
if($(element).offset().top < scrollTop + 400){
$(element).animate({left:'50px'}, 300);
}
});
});
I would recommend you having a look at Skrollr.js. It has a very good documentation and your effect can be accomplished with Skrollr.js very easily.
Have a look at these two tutorials to help you get started:
Simple parallax scrolling tutorial
How to create a parallax scrolling website
Related
I'm in the process of coding a sticky notification bar seated at the bottom of a mobile screen. I want the bar to be stuck at the bottom of the users screen until the user has reached the scroll position of where the bar is actually positioned in the code (which is just before the footer of the page).
I have pretty much copied the "doctor" example from this page: https://alligator.io/css/position-sticky/
My problem is: On my page, the bar works fine when using Android Devices or when simulating a mobile device by adjusting the Browser width on my Desktop Computer. However, on iOS, the bar is not sticky, i.e. it just sits at its position and doesn't stick to the bottom of the screen until reached. This applies to both Safari and Google Chrome.
The weird thing is: On the previously mentioned alligator.io page, it works just fine on my iOS device.
I suspect this is some kind of Webkit problem having to do with the code surrounding the bar, but I cannot isolate it. I have tried debugging by adjusting my code as far as possible to the example from alligator.io, but I cannot get it to work. I have also tried looking for any overflow:auto in parent elements - without success. I have been trying to fix this for several hours and am sick and tired of the problem and could use another pair of eyes to help me find what I'm overlooking.
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
position: -webkit-sticky;
position: sticky;
bottom: -50px;
align-self: flex-end;
}
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
You can visit the live page I am working on at (hidden on request of the customer, please contact me privately).
Simply start any (suggested) search and the bar will pop up (or not, if you are using iOS...)
Thanks in advance for your help.
I feel like an idiot for answering my own question, but I figured out what is causing the problem.
I hope this will help developers facing the same problem because I could not find anywhere defining this behavior.
As you can see, in my code, there is a wrapper (specifically a link) around the element, on which I use my position:sticky:
<a href="#" class="jobAlertToggle">
<div id="jobalarm_mobile">
<i class="fa fa-bell"></i>
<span>Jobalarm aktivieren</span>
<label class="switch">
<input type="checkbox">
<span class="slider round"></span>
</label>
</div>
</a>
For some reason, this is not a problem for Chrome or Firefox on Desktop as well as Android, as they seem to ignore this container, probably because it doesn't define any positioning behavior. This is why it works on other devices. However, iOS does not ignore the container and therefor positions the div relative to its parent container, which is the link. After removing the link for test purposes, it worked on all devices.
This is the real answer
position: -webkit-sticky;
position: -moz-sticky;
position: -o-sticky;
position: -ms-sticky;
position: sticky;
and works!!!
Some of the tips in my answer here may help, notably adding display: block to your container may do the trick.
For me nothing worked except jQuery/javascript in this way: give the element you need to be sticky position:absolute and left: 0, then use javascript to calculate offset of the window to the left, and add that offset to the left property of your element:
#stickyElement {
position: absolute;
left: 0;
}
function scrolling(){
$('.someElementScrollingLeft').on('scroll', function() {
let offset = $(this).scrollLeft();
/* For me it only didn't work on phones, so checking screen size */
if($( window ).width() <= 768)
{
let stickyElement = $('#stickyElement');
stickyElement.css("left", offset);
}
});
}
In my case in full screen menu it was overflow-y: auto. I eliminated this issue by adding: overscroll-behavior: contain.
I visited a website and may be I found solution for you.
Try this it may can help you:
#jobalarm_mobile {
display: none !important;
}
and then place your notification <a> tag at the end (after <footer> tag)
//write this css
.jobAlertToggle{
display: none;
}
#media (max-width: 767px)
.jobAlertToggle{
display: block;
width: 100%;
position:sticky;
position:-webkit-sticky;
bottom:-50px;
}
#jobalarm_mobile {
display: table;
font-size: 18px;
width: 100%;
height: 40px;
background: #ff8400;
color: white;
font-weight: 400;
text-align: center;
-webkit-align-self: flex-end;
align-self: flex-end;
}
For my problem it was:
I had { contain: paint; } in ancestor (container above inside-container).
Changed it to { overflow: clip; }
Sticky would not work if contain: paint was present regardless of having overflow: clip.
This was tested on Iphone 15.4.1. Other tested devices didn't break with contain: paint (tested on chrome, ipad, android)
I had so many problems with this issue as well. The sticky position wouldn't work on my phone - not in Safari or Chrome.
I tried placing the element that I wanted sticky in the top of the surrounding wrapper - it worked! Apparently the sticky position can't really work if there is something above it inside the same parent-wrapper. You don't have to change your order or design, you can just create a wrapper that's around the content, with the sticky element in the top.
<div class="container">
<p>Some text above the sticky element</p>
<div class="inside-container">
<div class="sticky-element">
<p>This is sticky</p>
</div>
<p>Some more text, that scrolls past the sticky element.</p>
</div>
</div>
I think the Problem is, that Safari (the Browser of iOS) does not support position: sticky properly. See this Article (https://caniuse.com/#feat=css-sticky). Read the Known Issues Section to find aut more. Maybe, you have to deactivate it for iOS and show a note on your Page, that its not working properly.
I hope, I could help you.
Use for ios position: -webkit-sticky and for other case position: sticky
I'm working on a simple tic-tac-toe application and building it in CodePen. When the user loses or forces a draw (designed to be unbeatable), a jquery UI dialog box pops up informing the user of said result. Issue I'm having, is that when this happens, a large empty space appears causing a scroll bar to appear at the right of the page. This is a small detail - but I'd like to fix. I cannot put overflow: hidden on the body because then users won't be able to scroll on small screens or in resized browser windows. I've already tried the following to no avail:
adjusting position of dialog to very top of screen
putting overflow: hidden rule just on .ui-dialog
adjusting the height of the dialog box
adjusting the margin-bottom of .ui-dialog
messing with other dialog options to see if they were the cause
Some of these seemed far-fetched but I wanted to try everything I could think of before coming here. Research has turned nothing up either. I'm running Chrome and the pen in question can be found here: http://codepen.io/no_stack_dub_sack/pen/YGNRxO.
Any help on this would be much appreciated! Thanks in advance.
Again, this is a small detail, but since the app fits all on one page without scroll on most screens, I'd like to keep it looking as clean as possible.
Here's the code:
// DIALOG BOXES
$('body').append('<div id="draw" class="gameOver"><p>It\'s a Draw!</p></div>');
$('body').append('<div id="loser" class="gameOver"><p>You Lose!</p></div>');
$('.gameOver').dialog({
autoOpen: false,
resizable: false,
height: 120,
dialogClass: 'no-close',
buttons: {
'Play Again?': function() {
$('.gameOver').dialog('close');
setNewGame();
}
}
});
Somewhere in the dialog creation process, the position is set to relative on your dialog, which causes the height of your game to calculate the dialog, which gives the empty gap. You can simply set ui-dialog position to absolute in the css, and it'll solve the problem:
.ui-dialog {
position: absolute;
box-shadow: 1px 1px 30px 5px;
background: #04A777;
border-radius: 10px;
outline: none;
overflow: hidden;
margin-top: none;
}
http://codepen.io/anon/pen/EgmoGZ
Hello guys and merry Xmas to all of you :)
I am currently using gmaps4rails to display a map with all my user locations. Now I'd like to fix it to the top directly under my fixed-top navbar. I've tried a lot of css code but still don't get the output I want. ( I am using twitter bootstrap)
Any ideas or code examples how to override the gmaps4rails css to fix it? Would be even nicer if the map is responsive too.
Thanks :)
If your navbar is 50px:
<style type="text/css">
html { height: 100% }
body { height: 100%; margin: 0; padding-top: 50px }
#map { height: 100% }
</style>
The resize handles don't show on dialog or in anything I try to resizablify inside a dialog. I know this is by design that they are disabled in the themes, but how do I get them visible? I need to see them in the dialog content and the ones for the dialog would not hurt either.
<p>Dialog
<div id="dialog" style="display:none;">
<p>foobar</p>
<div style="width:100px; height:100px; border:1px solid;" id="bar">BAR</div>
</div>
<script>
$(function(){
$('a[href=#dialog]').click( function(e) {
e.preventDefault();
$('#dialog').dialog({
open: function() {
$('#bar').resizable({handles:'sw,se,e'});
}
});
});
});
</script>
Also in JSFiddle: http://jsfiddle.net/s22nx/
There are a couple of things going on here contributing to the problem, one of them could be a bug.
Firstly, you are correct that the south-east handle was hidden intentionally, however all 8 handles still exist as elements in the dialog. This is good news since you can add the following CSS to bring the se handle back. It's a bit of a hack to get around the intentional hiding and you might want to adjust the right and bottom positioning to suit your needs.
.ui-dialog .ui-resizable-se {
right:0 !important;
bottom:0 !important;
background-position: -64px -224px !important;
}
The other grabbers seem to by design have no style associated with them. None of the themes I checked have any visible style (aside from the cursor). Search for .ui-resizable- in the jquery-ui.css to see this.
This is sort of covered in the documentation but only mentioned in the context of generating your own handles. There is nothing explicit about existing theme support. Luckily all the handles share a class, so we can make them all visible by adding:
.ui-resizable-handle {
background-color:lightblue;
}
Or just one side, for example:
.ui-resizable-s {
background-color:lightblue;
}
The possible bug I mentioned was to do with controlling the generation of handle elements. The code in question $('#bar').resizable({handles:'sw,se,e'}); should be correct and result in only 3 handle elements but all 8 always appear.
In the _makeResizable function in jquery-ui.js (v1.10.2) the line:
resizeHandles = typeof handles === "string" ? handles : "n,e,s,w,se,sw,ne,nw";
should set the correct resizeHandles to the value you supply as an options parameter but typeof handles = 'object' for me, so jQueryUI is using the else part of the ternary.
In the css file, I had to change:
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: -5px;
bottom: -5px;
background-position: 16px 16px;
}
to:
.ui-dialog .ui-resizable-se {
width: 12px;
height: 12px;
right: 3px;
bottom: 3px;
}
Or you just forget to include required css
<script src="js/jquery-ui.min.js"></script>
Check this
UPD
They do get handles, they're just not visible with the default theme. This isn't something specific to jQuery UI. Many resizable windows work this way.
I have attached two pictures, the first shows the "desktop" of the webapp I work on, some of the icons you see open dialogs made of a <div/> containing an <iframe/>, but while on a normal pc it all works properly, on the iPad it seems there is a problem with the z-index of some elements, as shown in second picture.
The small red rounds with number inside are defined as follows:
.countComunicazioni {
position: relative;
background: url(/images/admin/menu_sgs/counter.gif) no-repeat center center;
height: 35px;
width: 35px;
color: #FFF;
top: -105px;
left: 120px;
z-index: 0;
font-weight: bold;
display: none;
}
.countComunicazioni p {
margin-top: -5px;
padding-top: 10px;
}
The markup is a <div class="countComunicazioni"/> tag and a <p/> tag inside.
I also noticed that now the problem also appears in Google Chrome V22, the numbers in red circles are always on top even if they have z-index == 0 and the dialogs have z-index > 1000.
As per this bug report ( http://code.google.com/p/chromium/issues/detail?id=144518 ), the change seems to be intended, even if I would bet it'll broke many layouts, not only ours.
This problem was not present in previous versions of Google Chrome, nor is present on Firefox V15 or Internet Explorer V9, where everything is rendered problem.
How can this problem be solved? I'm no CSS expert, so I must admit I have tried little, if anything, so far... And also, who is "right" here? Is our markup incorrect, or does the problem lie in google chrome new rendering strategy?
EDIT
It seems I've been able to solve the issue shown in the two pics: all the dialogs generated from my web app are placed inside a <div/> with position:fixed placed on the very top of the body, now I tried to move the div to the very bottom of the page, and the layout seems now correct.
There is one more problem though: when opening a modal dialog, the opaque layer that is supposed to be created between the dialog and the below content, is actually created above it, see new screenshot.
How could this problem be solved? Does it require modifying our javascript or is it an issue with jquery ui itself?
Just found out myself that the way that chrome 22+ handles z-index has been altered.
Check out this awesome explanation here that I didn't write here...
http://updates.html5rocks.com/2012/09/Stacking-Changes-Coming-to-position-fixed-elements
Basically the way I understand it is that elements which have
position: fixed
now get counted with their own z-index layer so you'll have to adjust your pages accordingly to suit.
Hope that helps!