I have seen many websites recently that are incorporating the scrolling from section to section like fullpage.js and I am trying to achieve this on only one section of a page, like this page wedding party app.Does anyone know how I could achieve this? I've had no luck in finding something that can help me recreate the snapping section with the iPhone.... I will be making my own animations.
this is very easy
html
<div id="skrollr-wrapper">
<div id="box1">box1</div>
<div id="box2">box2</div>
</div>
<script src="http://code.jquery.com/jquery-2.0.3.min.js"></script>
<script src="http://prinzhorn.github.io/skrollr/dist/skrollr.min.js"></script>
css
body {
padding: 0;
margin: 0;
background: #fff fixed url(data:image/png;base64,iVBORw0KGgoAAAANSUhEUgAAACAAAAAgAQMAAABJtOi3AAAABlBMVEX4+Pj09PQf/c7fAAAAGklEQVR4Xq3MIQEAAADDIPqX/kvMIMEWEm8O7b0/wewc/NcAAAAASUVORK5CYII=) repeat;
}
#skrollr-wrapper {
/* make sure the boxes stay in place while you
scroll by wrapping them in this fixed div: */
width:100%;
height:100%;
position:fixed;
overflow: hidden;
}
#skrollr-wrapper div {
position: absolute;
overflow: hidden;
text-align: center;
}
#box1 {
background: blue;
margin: auto;
top: 0; left: 0; right: 0; bottom: 0;
}
#box2 {
background: red;
height: 100px;
width: 100%;
margin-top: 50px;
}
jquery
// setSkrollr function extracted from https://www.pingdom.com/2013/
var setSkrollr = function($el, data) {
for (var i = 0, l = data.length; i < l; i++) {
var d = data[i],
px = d[0];
css = d[1];
$el.attr('data-' + px, css);
}
}
jQuery(function($) {
setSkrollr($('#box1'), [[0, 'width:100%'], [1500, 'width:0%']]);
setSkrollr($('#box2'), [[0, 'transform:translateX(-100%)'], [750, 'transform:translateX(100%)'], [1500, 'transform:translateX(-100%)']]);
skrollr.init({
smoothScrolling: false
});
});
Related
I am currently building a website and I want a aesthetically pleasing landing page with a background fade in and out slideshow comprised of pictures that repeat y and x. I have the fading slideshow working perfectly and all I need is to repeat the image across the screen. Adding background: repeat to the CSS does not work. Below is may code:
HTML:
<div class="mybody" id="slider">
<div>
<h2>Dog Adoption</h2>
<p>Find the perfect match for your new four legged companion</p>
</div>
</div>
JavaScript:
var curIndex = 0,
imgDuration = 3000,
slider = document.getElementById("slider"),
slides = slider.childNodes; //get a hook on all child elements, this is live so anything we add will get listed
imgArray = [
'../../static/main/images/slideshow/dog2.jpg',
'../../static/main/images/slideshow/dog3.jpg',
'../../static/main/images/slideshow/dog4.jpg',
'../../static/main/images/slideshow/dog1.jpg',
];
//
// Dynamically add each image frame into the dom;
//
function buildSlideShow(arr) {
for (i = 0; i < arr.length; i++) {
var img = document.createElement('img');
img.src = arr[i];
slider.appendChild(img);
}
// note the slides reference will now contain the images so we can access them
}
//
// Our slideshow function, we can call this and it flips the image instantly, once it is
called it will roll
// our images at given interval [imgDuration];
//
function slideShow() {
function fadeIn(e) {
e.className = "fadeIn";
};
function fadeOut(e) {
e.className = "";
};
fadeOut(slides[curIndex]);
curIndex++;
if (curIndex === slides.length) {
curIndex = 0;
}
fadeIn(slides[curIndex]);
setTimeout(function () {
slideShow();
}, imgDuration);
};
buildSlideShow(imgArray);
slideShow();
CSS:
.mybody{
width: 100%;
min-height: 100vh;
max-height: fit-content;
top: 0px;
left: 0px;
padding: 0px;
/*background: url(../images/slideshow/dog1.jpg);*/
display: flex;
justify-content: center;
align-items: center;
text-align: center;
margin: 0px;
position: relative;
background-repeat: repeat;
}
.mybody img {
transition: opacity 1.5s;
position: absolute;
left: 0;
top: 0;
opacity:0;
background-repeat: repeat;
}
.mybody img.fadeIn {
opacity:1;
}
When I just set the background image as a fixed image (no JS) I get the desired result:
However when I comment out the backgorund image (as in above code) and just have the JS slideshow as the background, this is the result:
I essentially just need this image from the second picture to repeat as in the first picture and cannot figure out how to make this happen although I am sure there is a simple fix/solution. If anyone could be of help it would be much appreciated. Thanks in advance!
You can't repeat an image without duplicating it. But you can repeat background so, you can make the slide using divs with background. Note the usage of css classes instead of jquery fade.
slide = 1;
setInterval(function() {
$(".slide").removeClass("active");
$(".div" + slide).addClass("active");
slide++
if (slide == 4) {
slide = 1;
}
}, 1000)
body {
height: 100vh;
width: 100%;
position: relative;
padding: 0;
margin: 0;
text-align: center;
padding: 30px;
}
.slide {
background-repeat: repeat;
background-size: 100px;
position: absolute;
left: 0;
right: 0;
top: 0;
bottom: 0;
opacity: 0;
transition: 1000ms all;
}
.slide.active {
opacity: 1;
}
.div1 {
background: url('https://picsum.photos/id/101/200');
}
.div2 {
background: url('https://picsum.photos/id/102/200');
}
.div3 {
background: url('https://picsum.photos/id/103/200');
}
.text {
position: relative;
z-index: 2;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/2.2.4/jquery.min.js"></script>
<body>
<div class="slide div1">
</div>
<div class="slide div2">
</div>
<div class="slide div3">
</div>
<div class="text">
<h1>dog trainer</h1>
<p>best in the world</p>
</div>
</body>
I'm having a hard time figuring out why the code below doesn't work as expected.
What I'm trying to achieve is same functionality with position:sticky whereas when the scrolled reaches the top of the #second-header then fixes its position below the #header which is also fixed, however, the height of the #header is unknown which is I believe can be calculated using the function outerHeight(true) on JQuery.
Then after reaching out to the bottom of the #second-header-container, remove the fixed position of #second-header turning it back to normal position.
Due to browser compatibility issues and other customization, I cannot simply use the position:sticky of css.
It looks like my logic is wrong, and I need help.
jQuery(document).ready(function(){
var $document = jQuery(document);
var header = jQuery('#header');
var second_header = jQuery('#second-header-container').find('#second-header');
var second_header_container = jQuery('#second-header-container');
var second_header_offset = second_header.offset().top;
var second_header_container_offset = second_header_container.offset().top;
jQuery(window).scroll(function(){
var top_margin = header.outerHeight(true);
var second_header_height = second_header.outerHeight(true);
var second_header_container_height = second_header_container.outerHeight(true);
if( jQuery(window).scrollTop() > (second_header_offset - second_header_height) && jQuery(window).scrollTop() < second_header_container_height) {
second_header.addClass('fixer');
second_header.css({position:'fixed', top:top_margin, 'z-index':'999999'});
} else {
second_header.removeClass('fixer');
second_header.css({position:'relative', top:'0px', 'z-index':'0'});
}
});
});
*{
color: #FFFFFF;
padding: 0;
margin: 0;
}
.fixer{
position: fixed;
width: 100%;
}
#header, .banner, #second-header, .contents{
padding: 5px;
}
#header{
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner{
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container{
min-height: 300px;
background-color: #775F5E;
}
#second-header{
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents{
min-height: 200px;
background-color: #97A36D;
}
.footer{
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
To achieve this you need first check if the scroll height is near the second div header and within the height of the second div. Then add a class that make it stick below the main header. I have created a sticky class and added it while scrolling conditions are met.
Please check below code
jQuery(document).ready(function() {
var headerHeight = $('#header').outerHeight(true);
var secondHeaderContainer = $('#second-header-container');
const secondHeaderTopPos = secondHeaderContainer.offset().top;
const secondHeaderContainerHeight = $(secondHeaderContainer).height();
$(window).scroll(function() {
const scrollTop = $(this).scrollTop();
const secondContainerHeightEnd = secondHeaderContainerHeight + secondHeaderTopPos - $('#second-header').height() - headerHeight;
if (((secondHeaderTopPos - headerHeight) <= scrollTop) && (secondContainerHeightEnd >= scrollTop)) {
$('#second-header').addClass('sticky').css('top', headerHeight);
} else {
$('#second-header').removeClass('sticky');
}
});
});
* {
color: #FFFFFF;
padding: 0;
margin: 0;
}
.sticky {
position: fixed;
width: 100%;
top: 0;
left: 0;
}
.fixer {
position: fixed;
width: 100%;
}
#header,
.banner,
#second-header,
.contents {
padding: 5px;
}
#header {
position: fixed;
width: 100%;
height: 74px;
z-index: 99999;
background-color: #000000;
}
.banner {
padding-top: 84px;
height: 200px;
background-color: #583E5B;
}
#second-header-container {
min-height: 300px;
background-color: #775F5E;
}
#second-header {
padding-bottom: 10px;
padding-top: 10px;
background-color: #4C3D3C;
}
.contents {
min-height: 200px;
background-color: #97A36D;
}
.footer {
background-color: #80A379;
}
<script src="https://cdnjs.cloudflare.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
<header id="header">HEADER</header>
<div class="banner">BANNER</div>
<div id="second-header-container">
<div id="second-header">SECOND-HEADER</div>
<!--Other contents and elements...-->
</div>
<div class="contents">OTHER...</div>
<footer class="contents footer">FOOTER</footer>
My code allows scrolling vertically in the bottom section to control scrolling horizontally in the top section.
My jsfiddle
You'll see the colors shift through a gradient. Works pretty well. Problem is that I can't quite seem to get the inverse to work. Scrolling horizontally in the top controls scrolling in the bottom.
Any ideas?
Here's the script that makes it work:
// Add event listener for scrolling
$("#bottom").on("scroll", function bottomScroll() {
var scrolledleft = parseInt($("#bottom").scrollTop()) * 1;
console.log(scrolledleft + scrolledright)
$("#top").scrollLeft(scrolledleft + scrolledright)
})
//Move right column to bottom initially
$("#top").scrollLeft($("#top").height())
//Get actual distance scrolled
var scrolledright = parseInt($("#top").scrollLeft())
Your event handlers need to temporarily cancel each other so that they don't both fire at once. You want to calculate your position percentage based on the current scrollLeft / (width of child div - width of container), then apply that percentage to the other element, and likewise for top/height. Also I changed the height of #top to 50% in CSS.
var handler = function (e) {
var src = e.target;
// the first element that triggers this function becomes the active one, until it's done
if (!activeScroller) activeScroller = src.id;
else if (activeScroller != src.id) return;
var $b = $("#bottom");
var $t = $("#top");
var scrollH = $("#bottom-content").height() - $b.height();
var scrollW = $("#top-content").width() - $t.width();
var scrollPct = 0;
if (src.id == "top") {
if (scrollW > 0) {
scrollPct = $t.scrollLeft() / scrollW;
}
$b.scrollTop(scrollH * scrollPct);
} else {
if (scrollH > 0) {
scrollPct = $b.scrollTop() / scrollH;
}
$t.scrollLeft(scrollW * scrollPct);
}
// give all animations a chance to finish
setTimeout(function () { activeScroller = ""; }, 100);
};
var activeScroller = "";
$("#top,#bottom").on("scroll", handler);
#top {
position: absolute;
margin: auto;
top: 0;
right: 0;
left: 0;
width: 100%;
height: 50%;
position: fixed;
overflow: auto;
background: red;
}
#top-content {
height: 100%;
width: 2000px;
background: linear-gradient(90deg, red, blue);
}
#bottom {
position: absolute;
margin: auto;
right: 0;
bottom: 0;
left: 0;
width: 100%;
height: 50%;
position: fixed;
overflow: auto;
background: green;
z-index: 100;
}
#bottom-content {
height: 2000px;
width: 100%;
background: linear-gradient(0deg, orange, green);
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script>
<div id="top">
<div id="top-content"></div>
</div>
<div id="bottom">
<div id="bottom-content"></div>
</div>
Check out this:
https://jsfiddle.net/1p7gp72h/1/
I'm not sure what your end goal is here.
$("#top").on("scroll", function topScroll() {
var scrolledleft = parseInt($("#top").scrollTop()) * 1;
$("#bottom").scrollLeft(scrolledleft + scrolledright)
});
#top {
top: 0;
right: 0;
left: 0;
width: 5000px;
height: 100%;
overflow: auto;
background: red;
overflow-x: scroll;
overflow-y: hidden;
white-space:nowrap;
}
Scroll to left ::
$('div').scrollLeft(1000);
Scroll back to normal/ scroll to right ::
$('div.slick-viewport').scrollLeft(-1000);
Hope someone can help me, I don't know where to look it up
I'm trying to do an onclick event that will change the position of 3 Divs.
The DIVS are placed like on a hoizontal circle, which means the one in the middle should be z-index: 1
left and right z-index: -1
onclick, the left should slide to the middle and change z-index
right go to the left and middle to the right.
How can I try to do that?
Started like this, but will not change position correctly.
jsFiddle
code snippet:
var i = 0;
while(i < (threeleft-50)){
var plus = (i)%2;
three.style.left = (threeleft-i)+'px';
two.style.left = (twoleft+plus)+'px';
one.style.left = (oneleft+plus)+'px';
i++;
}
Also still need a little of animation if there is a better way to do that, let me know
Thanks so far
One issue is that during the while the screen is not updated so you will only see the final position and not the animation. Then the plus = i%2 will always return 0 or 1. so that is what gets added to the two and one positions. (you most likely need var plus = i/2; there)
In general i would use CSS for positioning/animating (through transitions) the elements and just changes classes with JS. Much cleaner and more maintainable.
function goleft() {
var one = document.querySelector('.pos-one'),
two = document.querySelector('.pos-two'),
three = document.querySelector('.pos-three');
one.classList.remove('pos-one');
one.classList.add('pos-two');
two.classList.remove('pos-two');
two.classList.add('pos-three');
three.classList.remove('pos-three');
three.classList.add('pos-one');
}
function right() {
var one = document.querySelector('.pos-one'),
two = document.querySelector('.pos-two'),
three = document.querySelector('.pos-three');
one.classList.remove('pos-one');
one.classList.add('pos-three');
two.classList.remove('pos-two');
two.classList.add('pos-one');
three.classList.remove('pos-three');
three.classList.add('pos-two');
}
.wrapper {
position: relative;
width: 800px;
height: 400px;
margin-top: 100px;
margin-left: auto;
margin-right: auto;
background-color: grey;
}
.pic {
width: 300px;
height: 300px;
position: absolute;
border: 3px solid black;
transition: all 0.5s;
}
#one {
background-color: red;
}
#two {
background-color: blue;
}
#three {
background-color: green;
}
.pos-one {
z-index: 150;
top: 50px;
left: 250px;
}
.pos-two {
z-index: 50;
top: 40px;
left: 50px;
}
.pos-three {
z-index: 50;
top: 40px;
left: 450px;
}
#bot {
position: absolute;
bottom: 0px;
left: 360px;
}
<div class="wrapper">
<div class="pic pos-one" id="one">1</div>
<div class="pic pos-two" id="two">2</div>
<div class="pic pos-three" id="three">3</div>
<div id="bot">
<button onclick="goleft()">left</button>
<button onclick="right()">right</button>
</div>
</div>
I am using bootstrap in my rails 4 app.
I've just given up on trying to integrate the bootstrap carousel into my page. (it pushes my text to the next container and doesn't resize the images with my styling).
I have two background images. My objective is to have those rotate from the time the page is loaded, on a timer.
My css has a background image, with text over the top of it and a darkened background over the top of bottom half of the background image so that the text is more clearly readable. I don't want the text to change as the background image changes.
I have the following css and html. I've tried to use js that people have set up for their various events, but nothing is working with this structure.
Does anyone know how to alternate a background image?
HTML:
<div class= "containerfluid">
<div class="collagecontainer">
<div class="row">
<div class="col-md-12">
<div class= "row">
<div class="col-md-12">
<div class="module">
<header>
<h1 style="letter-spacing:2px"><br><br><br>Constant header remains the same</h1>
<h3>constant tagline remains the same</h3>
</header>
</div>
</div>
</div>
</div>
</div>
</div>
</div>
CSS:
.module {
background: image-url('glowc.jpg');
background-color: black;
background-repeat: no-repeat;
background-size: cover;
background-attachment: fixed;
width: 100%;
min-height: 600px;
position: relative;
overflow: hidden;
margin: 0px;
}
.module > header {
position: absolute;
bottom: 0;
left: 0;
width: 100%;
padding: 20px 10px;
background: inherit;
background-attachment: fixed;
overflow: hidden;
}
.module > header::before {
content: "";
position: absolute;
top: -20px;
left: 0;
width: 200%;
height: 200%;
background-color: black;
opacity: 0.6;
background-attachment: fixed;
-webkit-filter: blur(4px) ;
filter: blur(4px) ;
}
.module > header::after {
content: "";
position: absolute;
top: 0;
left: 0;
width: 100%;
height: 100%;
background: rgba(0, 0, 0, 0.25)
}
.module > header > h1 {
margin: 0;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 50px;
position: relative;
z-index: 1;
}
.module > header > h3 {
margin: 0;
padding-left:15%;
padding-right:15%;
padding-top:20px;
color: white;
font-family: 'Quicksand', sans-serif;
font-size: 25px;
color:#E8DA0C;
position: relative;
z-index: 1;
}
* {
box-sizing: border-box;
}
I would like to have the background-image in .module to alternate between glowc.jpg with glowp.jpg. All the rest should remain the same.
JS:
I'm trying to figure this out. I'm up to this point but getting lost and confused.
var images = [
do i put my alternate image here?
];
var index = 0;
setInterval(change_up, 1000);
function change_up(){
index = (index + 1 < images.length) ? index + 1 : 0;
$('.block').fadeOut(300, function(){
$(this).css('background-image', 'url('+ images[index] + ')')
$(this).fadeIn(300);
});
}
You just have to set the class and URLs for images.
DEMO https://jsfiddle.net/maxlipsky/ua337onq/1/
var images = [
"http://upload.wikimedia.org/wikipedia/ru/a/a6/Bender_Rodriguez.png", "http://theinfosphere.org/images/thumb/4/43/Bender.png/180px-Bender.png"
];
var index = 0;
setInterval(change_up, 2000);
function change_up(){
index = (index + 1 < images.length) ? index + 1 : 0;
$('.module').fadeOut(300, function(){
$(this).css('background-image', 'url('+ images[index] + ')')
$(this).fadeIn(300);
});
}