Im trying to make a navbar that is transparent when youre on the top of the page and when you move down the background for the navigation bar appears but when the animation triggers for the first time it looks like it was triggered twice. How could I fix this?
window.onscroll = function () {
var scroll = getScrollTop();
var navbar = document.getElementById('navbar');
if (scroll > 20) {
navbar.classList.remove('onTop');
navbar.classList.add('moved');
}
else{
navbar.classList.remove('moved');
navbar.classList.add('onTop');
}
}
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
return pageYOffset;
}
else{
var B= document.body;
var D= document.documentElement;
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}
body {
background: linear-gradient(215deg, #d55724, #5259e2);
background-size: 400% 400%;
margin:0;
padding:0;
height:1000px;
}
.navbar {
position: fixed;
top:0;
width:100%;
height:50px;
}
.onTop {
position: fixed;
top:0;
width:100%;
height:50px;
animation-iteration-count: 1;
animation: NavBar-onTop .3s;
}
.moved {
background-color: white;
position: fixed;
top:0;
width:100%;
height:50px;
animation-iteration-count: 1;
animation: NavBar-moved .6s;
}
#keyframes NavBar-moved {
from {background-color: rgba(255, 255, 255, 0);}
to {background-color: rgb(255, 255, 255);}
}
#keyframes NavBar-onTop{
from {background-color: rgb(255, 255, 255);}
to {background-color: rgba(255, 255, 255, 0);}
}
<div id="navbar" class="navbar">ExampleNavBar</div>
I have fixed it.
$(window).scroll(function(){
var scroll = $(window).scrollTop();
if(scroll < 300){
$('.navbar').css('background', 'transparent');
} else{
$('.navbar').css('background', 'white');
}
});
function getScrollTop(){
if(typeof pageYOffset!= 'undefined'){
//most browsers except IE before #9
return pageYOffset;
}
else{
var B= document.body; //IE 'quirks'
var D= document.documentElement; //IE with doctype
D= (D.clientHeight)? D: B;
return D.scrollTop;
}
}
body {
background: linear-gradient(-250deg, #1E3B70, #29539B);
background-size: 400% 400%;
margin:0;
padding:0;
height:10000px;
}
.navbar {
margin-top: 0 !important;
position: fixed !important;
top:0 !important;
width:100%;
height:50px;
transition:500ms ease;
background-color: transparent;
}
.navbar.scrolled {
background:white;
}
<div id="navbar" class="navbar">TEST</div>
<script src="https://code.jquery.com/jquery-2.2.4.min.js"></script>
Related
EDIT: Anyone please?
I got this from somewhere but when I tap on it on the phone (on PC it's ok) it stays with hover attributes = no BG and black colour to the next website refresh:
HTML
<a id="back2Top" title="Top" href="#">➤</a>
CSS
#back2Top {
width: 40px;
line-height: 40px;
overflow: hidden;
z-index: 999;
display: none;
cursor: pointer;
transition: background-color 0.2s linear;
-moz-transform: rotate(270deg);
-webkit-transform: rotate(270deg);
-o-transform: rotate(270deg);
-ms-transform: rotate(270deg);
transform: rotate(270deg);
position: fixed;
bottom: 39px;
right: 0;
background-color: #8db500;
color: #fff;
text-align: center;
font-size: 30px;
text-decoration: none;
}
#back2Top:hover {
background-color: transparent;
color: #000;
}
#media only screen and (max-width: 767px) {
#back2Top {
bottom: 0px;
}}
And JS
$(window).scroll(function() {
var height = $(window).scrollTop();
if (height > 100) {
$('#back2Top').fadeIn();
$('.open').css('background', 'rgba(141, 181, 0, 0.5)'); //these 3 are for something different
$('.closed').css('background', 'rgba(201, 0, 10, 0.5)');
$('.warn').css('background', 'rgba(255, 113, 0, 0.5)');
} else {
$('#back2Top').fadeOut();
$('.open').css('background', 'rgba(141, 181, 0, 1)'); //these 3 are for something different
$('.closed').css('background', 'rgba(201, 0, 10, 1)');
$('.warn').css('background', 'rgba(255, 113, 0, 1)');
}
});
$(document).ready(function() {
$("#back2Top").click(function(event) {
event.preventDefault();
$("html, body").animate({ scrollTop: 0 }, "slow");
return false;
});
});
What is wrong there? Or what I did wrong?
×I don't know what to add more here, it won't let me post it because of mostly code.×
Thank you.
If I'm right then you're trying to make an icon to go to the Top.
Here, I'm sharing a simple code for that, you'll understand easily.
window.onscroll = function () { myFunction() };
var goToTop = document.getElementById("goToTop");
function myFunction() {
if (window.pageYOffset >= 30) {
goToTop.classList.add("sticky")
} else {
goToTop.classList.remove("sticky");
}
}
body{
height:1500px;
width:100vw;
}
.goToTop{
height:69px;
width:69px;
border-radius: 50%;
background:white;
position:fixed;
right:30px;
bottom:20px;
z-index:1000;
display:none;
}
.goToTop img{
width:70px;
}
.goToTop.sticky{
display: inline-block;
}
<body id="body">
<div class="goToTop" id="goToTop">
<a href="#body">
<img src="https://img.icons8.com/ios/50/000000/collapse-arrow--v1.png"/>
</a>
</div>
</body>
OR
If I'm wrong
Or
You want me to fix your code only, then let me know in the comments.
Closed. This question needs debugging details. It is not currently accepting answers.
Edit the question to include desired behavior, a specific problem or error, and the shortest code necessary to reproduce the problem. This will help others answer the question.
Closed 3 years ago.
Improve this question
i've been trying to figure this out by myself the entire night and i just can't make my button clickable... i would keep trying but i'm tired and i need to go to sleep really bad.
the code is mostly pasted.
i'm really bad at this kind of stuff
don't judge the the bad code...
but i need this button really bad so i can redirect to my welcome page.
the button code itself works, the problems is its conficting with the other stuff and makes it non clickable.
so... here's the full index page of my site with the button that doesn't work:
<!DOCTYPE html>
<html>
<head>
<style>
div.a {
text-align: center;
</style>
</head>
<body>
<style>
.button {
background-color: #4CAF50; /* Green */
border: none;
color: white;
padding: 15px 32px;
text-align: center;
text-decoration: none;
display: block;
font-size: 16px;
margin: 0 auto;
cursor: pointer;
-webkit-transition-duration: 0.4s; /* Safari */
transition-duration: 0.4s;
}
.button2:hover {
box-shadow: 0 12px 16px 0 rgba(0,0,0,0.24),0 17px 50px 0 rgba(0,0,0,0.19);
}
</style>
<br><br><br><br><br><br><br><br>
<div class="a">
<button onclick= "location.href='welcome'"
button class="button button2">❤
</button>
</div>
<html>
<div class="container">
<div class="text"></div>
</div>
<font face="Sarpanch" color="white" size"10" class="message">
</font>
<font face="Play">
</font>
<font face="Play" class="cn">
</font>
<div class="clouds">
</div>
<iframe width="1" height="1" src="https://www.youtube.com/embed/F2CXCbz3_Nc?rel=0&autoplay=1" frameborder="0" allowfullscreen></iframe>
</html>
<html>
<style>
* {
margin: 0;
padding: 0;
}
body{
background-color: #000;
}
-webkit-#keyframes we-are {
from {scale: 1.1;}
to {scale: 0;}
}
#keyframes we-are {
from {scale: 1.1;}
to {scale: 0;}
}
-webkit-#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes fadeIn {
0% {opacity: 0;}
100% {opacity: 1;}
}
#keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-webkit-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-moz-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#-ms-keyframes move-twink-back {
from {background-position:0 0;}
to {background-position:-10000px 5000px;}
}
#keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
#-webkit-keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
#-moz-keyframes move-clouds-back {
from {background-position:0 0;}
to {background-position:10000px 0;}
}
#-ms-keyframes move-clouds-back {
from {background-position: 0;}
to {background-position:10000px 0;}
}
.container {
height: 100%;
width: 100%;
justify-content: center;
align-items: center;
display: flex;
}
.text {
font-weight: 100;
font-size: 28px;
color: #FAFAFA;
font-family: Iceland;
text-shadow: 0 0 0.5em cyan, 0 0 0.5em cyan;
}
.dud {
color: #757575;
}
.animation-container {
position: fixed;
top: 0;
left: 0;
right: 0;
bottom: 0;
z-index: 1;
}
.animation-container span {
color: whitesmoke;
display: block;
font-size: 18px;
font-family: 'Helvetica';
text-shadow: 0 0 1px white;
position: absolute;
user-select: none;
pointer-events: none;
cursor: default;
z-index: 1;
opacity: 0;
will-change: transform, opacity;
animation-timing-function: ease-out;
animation-name: move;
}
#keyframes move {
0% {
opacity: 0;
transform: translateY(100vh);
}
25% {
opacity: 1;
}
50% {
opacity: 1;
}
75% {
opacity: 0;
}
100% {
opacity: 0;
transform: none;
}
}
.buzz_wrapper{
position:relative;
width:100%;
margin:180px auto;
background-attachment: fixed;
background-position: 0 0;
background-repeat: no-repeat ;
background-size:cover;
overflow : hidden;
overflow:hidden;
padding:100px;
}
.scanline{
width:100%;
display:block;
background:#000;
height:4px;
position:relative;
z-index:3;
margin-bottom:5px;
opacity:0.1;
}
.buzz_wrapper span{
position:absolute;
-webkit-filter: blur(1px);
font-size:30px;
font-family:'Courier new', fixed;
font-weight:bold;
}
.buzz_wrapper span:nth-child(1){
color:red;
margin-left:-2px;
-webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(2){
color:green;
margin-left:2px;
-webkit-filter: blur(2px);
}
.buzz_wrapper span:nth-child(3){
color:blue;
position:20px 0;
-webkit-filter: blur(1px);
}
.buzz_wrapper span:nth-child(4){
color:#fff;
-webkit-filter: blur(1px);
text-shadow:0 0 50px rgba(255,255,255,0.4);
}
.buzz_wrapper span:nth-child(5){
color:rgba(255,255,255,0.4);
-webkit-filter: blur(15px);
}
.buzz_wrapper span{
-webkit-animation: blur 30ms infinite, jerk 50ms infinite;
}
#-webkit-keyframes blur {
0% { -webkit-filter: blur(1px); opacity:0.8;}
50% { -webkit-filter: blur(1px); opacity:1; }
100%{ -webkit-filter: blur(1px); opacity:0.8; }
}
#-webkit-keyframes jerk {
50% { left:1px; }
51% { left:0; }
}
#-webkit-keyframes jerkup {
50% { top:1px; }
51% { top:0; }
}
.buzz_wrapper span:nth-child(3){
-webkit-animation: jerkblue 1s infinite;
}
#-webkit-keyframes jerkblue {
0% { left:0; }
30% { left:0; }
31% { left:10px; }
32% { left:0; }
98% { left:0; }
100% { left:10px; }
}
.buzz_wrapper span:nth-child(2){
-webkit-animation: jerkgreen 1s infinite;
}
#-webkit-keyframes jerkgreen {
0% { left:0; }
30% { left:0; }
31% { left:-10px; }
32% { left:0; }
98% { left:0; }
100% { left:-10px; }
}
.buzz_wrapper .text{
-webkit-animation: jerkwhole 5s infinite;
position:relative;
}
#-webkit-keyframes jerkwhole {
30% { }
40% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);}
41% { opacity:0.8; top:0px; left:-100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(50deg,0);}
42% { opacity:0.8; top:0px; left:100px; -webkit-transform:scale(1,1.2); -webkit-transform:skew(-80deg,0);}
43% { opacity:1; top:0; left:0; -webkit-transform:scale(1,1); -webkit-transform:skew(0,0);}
65% { }
}
</style>
</head>
</html>
<script language="JavaScript">
class TextScramble {
constructor(el) {
this.el = el
this.chars = '!##$%^&*()_-=+{}:"|<>?,./;'
this.update = this.update.bind(this)
}
setText(newText) {
const oldText = this.el.innerText
const length = Math.max(oldText.length, newText.length)
const promise = new Promise((resolve) => this.resolve = resolve)
this.queue = []
for (let i = 0; i < length; i++) {
const from = oldText[i] || ''
const to = newText[i] || ''
const start = Math.floor(Math.random() * 40)
const end = start + Math.floor(Math.random() * 40)
this.queue.push({ from, to, start, end })
}
cancelAnimationFrame(this.frameRequest)
this.frame = 0
this.update()
return promise
}
update() {
let output = ''
let complete = 0
for (let i = 0, n = this.queue.length; i < n; i++) {
let { from, to, start, end, char } = this.queue[i]
if (this.frame >= end) {
complete++
output += to
} else if (this.frame >= start) {
if (!char || Math.random() < 0.28) {
char = this.randomChar()
this.queue[i].char = char
}
output += `<span class="dud">${char}</span>`
} else {
output += from
}
}
this.el.innerHTML = output
if (complete === this.queue.length) {
this.resolve()
} else {
this.frameRequest = requestAnimationFrame(this.update)
this.frame++
}
}
randomChar() {
return this.chars[Math.floor(Math.random() * this.chars.length)]
}
}
const phrases = [
'Click no botão para ir pro nosso site',
'❤',
]
const el = document.querySelector('.text')
const fx = new TextScramble(el)
let counter = 0
const next = () => {
fx.setText(phrases[counter]).then(() => {
setTimeout(next, 1500)
})
counter = (counter + 1) % phrases.length
}
next()
'use strict';
var app = {
chars: ['lixo','ta de hack','NAO PODE CAPS','PODE NADA NESSE SERVER','esse 1Fawkes ta xitado','TEM ADM?','TEM GENTE JOGANDO GRANADA','panela','server lixo','o que e bipe','ta enxergando muito'],
init: function () {
app.container = document.createElement('div');
app.container.className = 'animation-container';
document.body.appendChild(app.container);
window.setInterval(app.add, 100);
},
add: function () {
var element = document.createElement('span');
app.container.appendChild(element);
app.animate(element);
},
animate: function (element) {
var character = app.chars[Math.floor(Math.random() * app.chars.length)];
var duration = Math.floor(Math.random() * 15) + 1;
var offset = Math.floor(Math.random() * (50 - duration * 2)) + 3;
var size = 10 + (15 - duration);
element.style.cssText = 'right:'+offset+'vw; font-size:'+size+'px;animation-duration:'+duration+'s';
element.innerHTML = character;
window.setTimeout(app.remove, duration * 1000, element);
},
remove: function (element) {
element.parentNode.removeChild(element);
},
};
document.addEventListener('DOMContentLoaded', app.init);
</script>
https://github.com/wizzz3/website/blob/master/site
the site: https://bf4gatserver.com/
If you are talking about the green button with the white heart then it's a small fix.
When you try to click the button you actually clicking the fixed div that contains all the floating text, because the element is in position: fixed; z-index: 1.
The element that holds the button <div class="a">, add to it the following css position: relative; z-index: 2; and your done!
Hope this is what you needed =]
Add pointer-events: none; to the .animation-container.
Final code:
.animation-container {
pointer-events: none;
}
Why it works? Because all the clicks happened on .animation-container that has position fixed and some other styling which make it be across the entire page.
So I have been trying this for hours since I have no huge experience in JavaScript. Basically, I have modified a CSS and HTML codes for the pop up, that I found on the web. However, I would love to make the pop up to show up 10 seconds after a page load. I have tried lots of methods, but none of them gave me the result I wanted. Actually, none of them worked, even partially.
Here is the latest method, which also didn't work.
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(***.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="popup('popUpDiv')">
<div id="container">
<div id="mainContent">
<p><strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>
The setTimeout code is the following:
<script type="text/javascript">
function openPopUp() {
element = document.getElementById("popUpDiv");
}
window.onload = setTimeout(openPopUp, 10000);
</script>
I thought maybe if I could load the pop up with the <script> code it would be very helpful, because I don't really like that the pop up is being loaded with the body tag: <body onload="popup('popUpDiv')">
But, I could not manage to do that, because the pop up does not load after I try to load it with the function. Maybe I was doing it wrong, but I have tried everything I could think of, and almost everything I found on web.
I know I have a lot of other mistakes other than the pop up, I am still working on them.
Sorry for not being very specific and copying entire codes, but without those I thought it would be hard to figure out what I was trying to do.
Thank you.
Just run your function in right place )
function toggle(div_id) {
var el = document.getElementById(div_id);
if ( el.style.display == 'none' ) { el.style.display = 'block';}
else {el.style.display = 'none';}
}
function blanket_size(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportheight = window.innerHeight;
} else {
viewportheight = document.documentElement.clientHeight;
}
if ((viewportheight > document.body.parentNode.scrollHeight) && (viewportheight > document.body.parentNode.clientHeight)) {
blanket_height = viewportheight;
} else {
if (document.body.parentNode.clientHeight > document.body.parentNode.scrollHeight) {
blanket_height = document.body.parentNode.clientHeight;
} else {
blanket_height = document.body.parentNode.scrollHeight;
}
}
var blanket = document.getElementById('blanket');
blanket.style.height = blanket_height + 'px';
var popUpDiv = document.getElementById(popUpDivVar);
popUpDiv_height=blanket_height/2-200;//200 is half popup's height
popUpDiv.style.top = popUpDiv_height + 'px';
}
function window_pos(popUpDivVar) {
if (typeof window.innerWidth != 'undefined') {
viewportwidth = window.innerHeight;
} else {
viewportwidth = document.documentElement.clientHeight;
}
if ((viewportwidth > document.body.parentNode.scrollWidth) && (viewportwidth > document.body.parentNode.clientWidth)) {
window_width = viewportwidth;
} else {
if (document.body.parentNode.clientWidth > document.body.parentNode.scrollWidth) {
window_width = document.body.parentNode.clientWidth;
} else {
window_width = document.body.parentNode.scrollWidth;
}
}
var popUpDiv = document.getElementById(popUpDivVar);
window_width=window_width/2-200;//200 is half popup's width
popUpDiv.style.left = window_width + 'px';
}
function popup(windowname) {
blanket_size(windowname);
window_pos(windowname);
toggle('blanket');
toggle(windowname);
}
window.onkeydown = function( event ) {
if ( event.keyCode == 27 ) {
console.log( 'ESC' );
document.getElementById('popUpDiv').style.display = 'none';
document.getElementById('blanket').style.display = 'none';
}
}
function openPopUp() {
setTimeout(function(){
popup('popUpDiv');
}, 5000);
}
#charset "UTF-8";
body {
font-family:Palatino, Baskerville, Georgia, serif;
background:#190121;
margin: 0;
padding: 0;
text-align: center;
color: #000000;
}
#container {
width: 780px;
background: #FFFFFF;
margin: 0 auto;
font-size:14px;
text-align: left;
}
#mainContent {
padding: 0 60px;
min-height:600px;
line-height:25px
}
img {border:0px}
/*LINKS*/
#mainContent .gamortva:link {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:visited {
color:#ffffff;
text-decoration:none;
font-size:8px;
background:#000000;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
}
#mainContent .gamortva:hover {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
#mainContent .gamortva:active {
color:#ffffff;
text-decoration:none;
font-size:9px;
background:#333333;
padding:5px;
-webkit-border-radius:10px;
-moz-border-radius:10px
}
/*STYLES FOR CSS POPUP*/
#blanket {
background-color:#111;
opacity: 0.65;
*background:none;
position:absolute;
z-index: 9001;
top:0px;
left:0px;
width:100%;
-webkit-transition: all 2s ease-in-out;
-moz-transition: all 2s ease-in-out;
-o-transition: all 2s ease-in-out;
transition: all 2s ease-in-out;
}
#popUpDiv {
position:absolute;
background:url(iRobot.jpg) no-repeat;
width:400px;
height:400px;
border:5px solid #000;
z-index: 9002;
}
.amazonis-knopka:link {
display: block;
text-align: center;
padding: 10px;
margin-top: 30px;
color:white;
text-decoration:none;
font-size:40px;
background:#000000;
opacity:0.8;
-webkit-border-radius:20px;
-moz-border-radius:20px;
}
.amazonis-knopka:hover{
padding: 10px;
text-decoration:underline;
font-size:43px;
-webkit-border-radius:10px;
-moz-border-radius:10px;
opacity:1;
}
.amazonis-knopka:visited{
color:white;
}
#mainContent .gamortva:active {
color:#ffffff;
}
.popTitle {
display: block;
margin-top: 10px;
text-align: center;
background:#333333;
padding:19px;
-webkit-border-radius:100px;
-moz-border-radius:10px;
background: rgba(0, 0, 0, 0.5);
display: block;
color:white;
font-size:23px;
}
.popText {
display: block;
margin-top: 40px;
text-align: center;
padding:30px;
-webkit-border-radius:20px;
-moz-border-radius:20px;
background: rgba(144, 154, 56, 0.3);
font-size:25px;
font-weight: bolder;
-webkit-text-fill-color: red;
-webkit-text-stroke-width: 1px;
-webkit-text-stroke-color: black;
}
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />
<title>Pop Up</title>
<link href="styles.css" rel="stylesheet" type="text/css" />
<script type="text/javascript" src="css-pop.js"></script>
</head>
<body onload="openPopUp()">
<div id="container">
<div id="mainContent">
<p>Roomba iRobot <strong>Pop Up</strong> Beta <em>V1</em></p>
<div id="blanket" style="display:none;"></div>
<div id="popUpDiv" style="display:none;">
<a href="#" class="gamortva" onclick="popup('popUpDiv')" >Close</a>
<span class="popTitle">Heading!..</span>
<span class="popText">Text..</span>
Link...
</div>
Click Here To Open The Pop Up
</div>
</div>
</body>
</html>
I want to make something like those website where you scroll down and some animation follows by your scrolling and if you scroll up it goes reverse.
I saw some libraries like this but I want to see can it be done some more simple way?
Thanks
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
if (st > lastScrollTop){
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
}
#keyframes myfirst {
0% {background: rgba(0,0,0,0); top: 0px;}
100% {background: rgba(0,0,0,1); top: 400px;}
}
.scrollDown{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 5s;
animation-direction: alternate-reverse;
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
Besides this I just tried changing keyframes on scroll so 100% or the end of animations changes by scrolling down and 0% by scrolling up but it doesnt work:
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('head').append('<style>#keyframes myfirst{0%{background: rgba(0,0,0,0); top: 0px;}100%{background: rgba(0,0,0,1); top: '+st+'px;}}</style>');
$('div').removeClass('scrollUp').addClass('scrollDown');
} else {
$('head').append('<style>#keyframes myfirst{0%{background: rgba(0,0,0,0); top: '+st+'px;}100%{background: rgba(0,0,0,1); top: '+lastScrollTop+'px;}}</style>');
$('div').removeClass('scrollDown').addClass('scrollUp');
}
lastScrollTop = st;
});
});
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
}
.scrollDown{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate;
}
.scrollUp{
animation-name: myfirst;
animation-duration: 0s;
animation-direction: alternate-reverse;
}
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
</head>
<div></div>
SOLUTION WITH TRANSITION (WITHOUT KEYFRAMES)
<!DOCTYPE html>
<html>
<head>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div></div>
<style>
body{
height: 150vh;
overflow-y: auto;
}
div {
width: 100px;
height: 100px;
position: fixed;
border: 1px solid black;
opacity: 0;
transition: opacity 0s ease;
background: rgb(0,0,0);
}
</style>
</head>
<body>
<div></div>
<script>
$(document).ready(function(){
var lastScrollTop = 0;
$(document).scroll(function(event){
var st = $(this).scrollTop();
$('head>style').last().remove();
if (st > lastScrollTop){
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st) / 400) * 0.8);
return opacity;
}, left: st
});
} else {
$('div').css({
opacity: function() {
var opacity = ((1 - (400 - st) / 400) * 0.8);
return opacity;
}, left: st
});
}
lastScrollTop = st;
});
});
</script>
</body>
</html>
It can be done more simply and without jQuery. This is a rough take, but I made it a bit more generic by adding a container and passing ratios around to get mostly full, bounded left-to-right position and zero-to-one opacity transitions:
var locked = false;
var container = document.getElementById('container');
var animated = document.getElementById('animated');
window.addEventListener('scroll', function() {
if (!locked) {
window.requestAnimationFrame(function() {
animated.style.opacity = Math.min(window.scrollY / window.innerHeight, 1);
animated.style.left = Math.min(animated.style.opacity * container.clientWidth, container.clientWidth - animated.clientWidth).toString() + 'px';
locked = false;
});
}
locked = true;
});
#container {
border: 1px solid red;
height: 200vh;
width: 80%;
}
#animated {
width: 100px;
height: 100px;
position: fixed;
opacity: 0;
background: rgb(0, 0, 0);
}
<div id="container">
<div id="animated"></div>
</div>
here is my fiddle : http://jsfiddle.net/k3AHM/23/
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
$('.menu-container').addClass( "fix-menu" ).animate('top', '-3px');
} else {
$('.menu-container').removeClass("fix-menu");
}
});
now when menu get fixed it's not smooth like this : demo
Any idea ? what's wrong with my code ?
may be you will accept this my update:
https://jsfiddle.net/k3AHM/37/
What I did:
1. You need to check whether function of animation already ran or not (otherwise on every scroll it will be called). This can be done by checking some outer var for 0 or 1 (it will show whether animation ran or not)
2. I used not "animate" function, but slideDown() - I think it's interesting too, though you can use animate instead, of course.
So here's my updated code:
var AlreadyRun=0;
$(document).ready(function(){
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
//$('.menu-container').addClass( "fix-menu" ).animate('top', '-3px');
if(AlreadyRun == 0){
AlreadyRun=1;
//alert('function starts, AlreadyRun='+AlreadyRun);
$('.menu-container').hide().addClass( "fix-menu" ).slideDown('slow');
}
} else {
AlreadyRun=0;
$('.menu-container').removeClass("fix-menu");
}
});
});
and I also think you don't need "transition" in CSS, so I also updated CSS:
.menu-container {
/* transition: all .3s ease-in-out; */
background:red;
margin-top:0;
}
.fix-menu{
/* transition: all .3s ease-in-out;*/
box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
height: 54px;
left: 0;
top:0;
overflow: hidden;
position: fixed;
right: 0;
z-index: 1500;
/* transition: all 0.2s ease-in; */
}
Hope it is what you needed.
CSS transition solution
http://jsfiddle.net/k3AHM/46/
var fixed = false;
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
if (!fixed)
{
fixed = true;
$('.menu-container').addClass( "fix-menu" );
}
}
else
{
fixed = false;
$('.menu-container').removeClass("fix-menu");
}
});
.menu-container {
transition: top .3s ease-in-out;
background:red;
margin-top:0;
top: -54px;
}
.fix-menu{
box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
height: 54px;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
z-index: 1500;
top: 0;
}
jQuery animation solution
http://jsfiddle.net/k3AHM/47/
var fixed = false;
$(document).scroll(function () {
var y = $(this).scrollTop();
if (y > 110) {
if (!fixed)
{
fixed = true;
$('.menu-container').addClass( "fix-menu" ).css('top', '-54px').animate({top: '0px'});
}
}
else
{
fixed = false;
$('.menu-container').removeClass("fix-menu");
}
});
.menu-container {
background:red;
margin-top:0;
}
.fix-menu{
box-shadow: 0 5px 10px 0.5px rgba(0, 0, 0, 0.1);
height: 54px;
left: 0;
overflow: hidden;
position: fixed;
right: 0;
z-index: 1500;
}
check this fiddle:
http://jsfiddle.net/k3AHM/24/
.menu-container {
transition: all .3s ease-in-out;
background:red;
margin-top:0;
top:-110px; /* add this */
}
You can add a position to thetop property at the menu-cointeiner and your code works smoothly.