Hi all I have a div in a project that has display=none until it reaches a certain scroll position then it changes to display=block.
This works and is great, whats not so great is the abruptness of the change. I'd like to find a way for it to ease in to view over, say, 50px.
The div I am looking to do this with has this structure
<div class=section id=anchoredCtaWeb>
<div class=container>
<h1>Hello World</h1>
</div>
</div>
This is the style and JS I have applied to it currently
<style>
#anchoredCtaWeb {
display: none;
position: sticky;
top: 0px;
}
</style>
<script>
document.addEventListener("scroll", function() {
if (window.pageYOffset > 817)
document.getElementById('anchoredCtaWeb').style.display = "block";
if (window.pageYOffset < 817)
document.getElementById('anchoredCtaWeb').style.display = "none";
});
</script>
I know the way its acting is exactly what I've written but I have been unsuccessful with transitioning the height from 0px to its full height.
I really appreciate any feedback, thanks!
You can do so by adding a class to #anchoredCtaWeb on scroll.
document.addEventListener("scroll", function() {
const anchoredCtaWeb = document.getElementById("anchoredCtaWeb");
if (window.pageYOffset > 817) {
anchoredCtaWeb.classList.add("show");
}
if (window.pageYOffset < 817) {
anchoredCtaWeb.classList.remove("show");
}
});
body {
height: 600vh;
}
#anchoredCtaWeb {
position: sticky;
transform: translateY(50px);
opacity: 0;
visibility: hidden;
top: 10px;
}
#anchoredCtaWeb.show {
transform: translateY(0px);
opacity: 1;
visibility: visible;
transition: 0.5s ease-in-out;
}
<div class="section" id="anchoredCtaWeb">
<div class="container">
<h1>Hello World</h1>
</div>
</div>
Check it in action on Codepen: https://codepen.io/manaskhandelwal1/pen/yLVOMPE
Related
i am trying to change background image on scroll, but cant seem to find any guide, so i will try my luck here.
here is a video of exactly what i am trying to achieve - https://www.youtube.com/watch?v=7u1aIxQCIXg
i want to have a background image, and text that goes over when i scroll, and when i come to a certain point, the background image changes/fades over and not scrolls up from the bottom
i have tried some, but does not have the skills at this point
although you didnt provided any progress you made still i enjoyed making it
accept my answer if you find it usefull please check my codepen link
demo
<style>
body {margin: 0;padding: 0;}
.section {
height: 100vh;
width: 100%;
display: flex;
z-index: 1;
position: relative;
background-size: 100% 100% !important;
}
.text {
margin:auto;
font-size: 2.5em;
border:1px solid white;
color:white;
padding:1em;
text-shadow: 2px 2px 3px black,
2px 2px 3px black;
}
.BG {
position: fixed;
z-index: 0;
opacity: 0.4;
transition: opacity 0.3s ease;
}
.anim {opacity:1;}
.show {color:orange;}
</style>
<body>
<div class="main">
<div class="section BG">
<div class="show"></div>
</div>
<div class="section" BGurl="https://i.ibb.co/0DxzSg0/pngtree-blue-carbon-background-with-sport-style-and-golden-light-image-371487.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/31YPsfg/triangles-1430105-340.png"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/Y3BgqMc/7f3e186790208b63dadda09d6b91d334.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/GCQP61b/photo-1513151233558-d860c5398176-ixlib-rb-1-2.jpg"><div class="text">SECTION</div></div>
<div class="section" BGurl="https://i.ibb.co/D9WGPf9/pngtree-modern-double-color-futuristic-neon-background-image-351866.jpg"><div class="text">SECTION</div></div>
</div>
</body>
<script>
function scrollPictureChange(){
var main = document.querySelector(".main"),
sections = main.querySelectorAll(".section"),
BG = main.querySelector(".BG"),
el = document.querySelector(".show"),cords,index=0,h = window.innerHeight,lastIndex=null,offset=0
applyBG(0)
window.addEventListener("scroll",function(){
scrollY = Math.abs(document.body.getClientRects()[0].top)
index = Math.floor(scrollY / (h - offset))
if(index != lastIndex){ // on index change
if(lastIndex != null){
applyBG(index)
}
lastIndex = index
}
el.innerText = `index : ${index} height : ${h} top : ${scrollY}`
})
function applyBG(index){
BG.classList.remove("anim")
setTimeout(function(){
BG.style.backgroundImage = `url(${sections[index + 1].getAttribute("BGurl")})`
BG.classList.add("anim")
},300)
}
}
window.onload = scrollPictureChange
window.onresize = scrollPictureChange
</script>
I am trying to make a slider carousel with VUE, the css classes (3 divs) are running in a for loop. Anytime a div fades out, the next slider creates a double slider at the bottom, meaning two sliders are running concurrently.
an example of the problem
Whenever I use the relative and absolute properties, my divs disappear totally. I don't know what to do
<template>
<h1 class="text-center">SLIDER APP</h1>
<div>
<div v-for="(color, index) in slider" :key="color">
<transition name="fade">
<div v-if="currentslide == index" :class="color"></div>
</transition>
</div>
</div>
</template>
<script>
export default {
data(){
return {
currentslide:0,
intervals:'',
slider:['first-slider', 'second-slider', 'third-slider'],
isshowing:true,
}
},
mounted(){
this.intervals = setInterval(() => {
console.log('This is slide', this.currentslide)
this.currentslide = this.currentslide == 2 ? 0:this.currentslide+1;
}, 2000);
},
beforeUnmount(){
clearInterval(this.intervals)
}
}
</script>
<style>
.first-slider {
background: blue;
height: 350px;
}
.second-slider {
background: red;
height: 350px;
}
.third-slider {
background: orange;
height: 350px;
}
.fade-enter-active, .fade-leave-active {
transition: all 0.5s ease;
}
.fade-enter-from, .fade-leave-to {
opacity: 0;
transform: translateX(30px);
}
</style>
Stop using absolute or relative positioning. Instead use display flex on an outer div for good positioning results.
I am making a project where I have images animating on a screen as I am scrolling down.I have tried animate but it doesnt seem like it is going with the scroll if i constantly keep going up&down.Hope what i provided helps.
$(window).scroll(function() {
var rep = $(window).scrollTop();
if (rep > 860) {
$('.teaimg').fadeIn();
}
if (rep < 860) {
$('.teaimg').fadeOut();
}
});
.teaimg {
background-image: url("leaf.jpg");
width: 779px;
height: 439px;
position: absolute;
top: 0;
display: none;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>
<div class="laptopbox1">
<img id="laptop" src="laptop.jpg">
<div id="screen">
<p id="text"></p>
<div class="teaimg"></div>
</div>
</div>
</main>
Try to use opacity concept here by adding and removing a class...Using fadeIn() and fadeOut() will give you abrupt effect as its show and hide the element which will also affect the document height and gives fluctuating effect on scroll...
Also use else for the else part of the condition...
I have created a example here...
$(window).scroll(function() {
var rep = $(window).scrollTop();
if (rep > 150) {
$('.teaimg').addClass("show");
} else {
$('.teaimg').removeClass("show");
}
});
.laptopbox1 {
margin: 200px 0;
}
.teaimg {
background-image: url("http://via.placeholder.com/350x150");
width: 350px;
height: 150px;
opacity: 0;
transition: all .3s ease;
}
.teaimg.show {
opacity: 1;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<main>Scroll
<div class="laptopbox1">
<div id="screen">
<p id="text"></p>
<div class="teaimg"></div>
</div>
</div>
</main>
I have a fixed tool bar with a dark background colour on top of my page with the following code.
/*html*/
<div class="floating-header-div">
<md-toolbar>
<a>Login</a>
</md-toolbar>
</div>
/*css*/
.floating-header-div {
position: fixed;
z-index: 999;
width: 100%;
}
md-toolbar {
background-color : rgb(55,58,60);
}
What I want to achieve is that the tool bar starts off with transparent background colour when the page is not scrolled. (So I only see the login link)
As the user scroll down abit more (past a certain section), the background color of the toolbar appears. Preferably animated.
How can I achieve this. I am using Angular 2 so preferably nothing too fancy like using document or jquery
Use (scroll)="onScroll($event) to catch the scroll event and with #ViewChild access the toolbar. With a simple validation toogle when your toolbar has to be transparent:
<div #content class="content">
<md-toolbar class="toolbar" color="{{ setColor ? 'primary' : 'accent' }}">
<span>Login</span>
</md-toolbar>
<div class="topimage"></div>
<p>Content</p>
</div>
#ViewChild('content') content;
setColor = false;
onScroll(event) {
this.setColor = this.content.nativeElement.getBoundingClientRect().top < -64;
}
I am not very good with Angular 2 animations but you can do it with CSS3:
.mat-toolbar{
-webkit-transition: background-color 400ms linear;
-ms-transition: background-color 400ms linear;
transition: background-color 400ms linear;
}
Here is a working example: https://plnkr.co/edit/emKv4YXGEGiRj8lyaWgr?p=preview
this should help you, you may need to modify this to suit your needs.
/*for setting navigation bar colour*/
$(document).ready(function(){
var scroll_start = 0;
var nav_element = $(".navbar");
var startchange = $('#my_element'); // element to start change when it reaches the top
var nav_element_height = nav_element.outerHeight();
var startchange_offset = startchange.offset().top;
var offset = Math.round(startchange_offset - nav_element_height);
$(document).scroll(function() {
scroll_start = $(this).scrollTop();
if(scroll_start > offset) {
nav_element.addClass('navbar-bg-color');
} else {
nav_element.removeClass('navbar-bg-color');
}
});
});
Try something like this :)
app = angular.module('myApp', []);
app.directive("scroll", function ($window) {
return function(scope, element, attrs) {
angular.element($window).bind("scroll", function() {
if (this.pageYOffset >= 50) {
scope.boolChangeClass = true;
} else {
scope.boolChangeClass = false;
}
scope.$apply();
});
};
});
body { margin: 0; background: lightgrey; min-height: 900px;}
.header {
background: transparent;
height: 70px;
padding: 24px;
box-sizing: border-box;
position: fixed;
right: 0;
left: 0;
top: 0;
z-index: 150;
font: 18px sans-serif;
color: white;
transition: all .25s ease-out;
}
.min .header { height: 50px; padding: 14px 24px; background: rgb(55,58,60);}
img{
width: 100%;
position: fixed;
}
<script src="https://ajax.googleapis.com/ajax/libs/angularjs/1.0.4/angular.min.js"></script>
<html>
<head>
<meta charset="UTF-8" />
<title>Document</title>
</head>
<body ng-app="myApp" scroll id="page" ng-class="{min:boolChangeClass}">
<div class="header">Header Title</div>
<div class="content">
<img src="https://images.pexels.com/photos/115045/pexels-photo-115045.jpeg?w=940&h=650&auto=compress&cs=tinysrgb">
</div>
</body>
</html>
I have a landing page, consisting of three frames, this frames always take 100% of viewport height and width.
I need to make transitions between frames, like "powerpoint presentation" etc. User scroll's, frame-1 slides up above viewport and frame-2 becomes in his place from bottom of viewport. I have almost zero experience in javascript/jquery. Have some ideas, that you can see in the code, but this ideas not works.
HTML:
<div class="wrapper" id="wrapper">
<div class="frame frame-1">
<!-- Content here -->
</div>
<div class="frame frame-2">
<!-- Content here -->
</div>
<div class="frame frame-3">
<!-- Content here -->
</div>
</div>
CSS:
.wrapper {
height: 300vh;
}
.frame {
position: fixed;
height: 100vh;
transition: all 1s ease;
}
.frame-1 {
top: 0vh;
}
.frame-2 {
top: 100vh;
}
.frame-3 {
top: 200vh;
}
JS:
var $document = $(document),
$element1 = $('.frame-1'),
$element2 = $('.frame-2'),
$element3 = $('.frame-3');
$(window).scroll(function () {
if ($(this).scrollTop() >= 50) {
$element1.css("top", "-100vh");
$element2.css("top", "0vh");
$element3.css("top", "100vh");
} else if ($(this).scrollTop() >= 100) {
$element1.css("top", "-200vh");
$element2.css("top", "-100vh");
$element3.css("top", "0vh");
} else {
$element1.css("top", "0vh");
$element2.css("top", "100vh");
$element3.css("top", "200vh");
}
});
If you have a set number of frames, I would suggest placing them all in a single div, and changing the top value of that. that way, only one value need be modified.
Like this: http://jsfiddle.net/xkh4D/10/
(Note that, though px are used, vh or whichever other unit should work just as well... haven't tried %, though...)
HTML
<div id='yo' class='view'>
<div>
<div class='frame red'></div>
<div class='frame green'></div>
<div class='frame blue'></div>
</div>
</div>
<input type='button' value='Scroll' onclick='scrollFrame()'/>
CSS
.view {
position:relative;
width:300px;
height:250px;
border:1px solid black;
overflow:hidden;
}
.view > div {
position:absolute;
width:inherit;
height:inherit;
top:0px;
}
.frame {
width:inherit;
height:inherit;
}
.red { background-color:#faa }
.green { background-color:#afa }
.blue { background-color:#aaf }
JavaScript
scrollFrame = function()
{
var h = $('#yo').height();
var y = parseFloat($('.view > div').css('top'));
var hsum = $('.view .frame').length * h;
console.log('h,y,hsum',h,y,hsum);
if (hsum-h == -1*y)
$('.view > div').animate({'top':0});
else
$('.view > div').animate({top:y-h},500);
}
This js could be your solution
http://alvarotrigo.com/fullPage/