What I have is a website with a parallax opening page. Unfortunately, the text sections appear to be interfering with the scrolling backgrounds so that as the page scrolls the bottom parallax image (which should be the size of a pc monitor and then with text overlaying it) is repeated rather than being horizontally centered.
I'm using foundation with my own simple javascript parallax function, however as I'm relatively inexperienced with javascript I'm struggling to fix the problem.
What it seems like the fix should be is to add some padding to the top of the "home-image-3" section, but when I do this the image is still split (repeating) and a margin is added to the text-section and doesn't stop the repeating image. Therefore I need a different solution.
You can see the problem in action here http://r3gamers.com/spratters53/
Take note that images 1 and 2 (the keyboard and building) work perfectly, and image 3 (the ps4) begins again right at the bottom of the image. It's barely noticable, and yet it's annoying that the image isn't aligned properly.
HTML
<!doctype html>
<html class="no-js" lang="en">
<head>
<link rel="icon" type="image/png" href="img/favicon.png">
<meta charset="utf-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>Dan Spratling | Portfolio</title>
<link rel="stylesheet" href="css/app.css" />
<link rel="stylesheet" href="css/foundation.css" />
</head>
<body class="darkgrey">
<div class="fixed shadow" id="includeHeader"></div>
<div class="large-12 text-center paddingtb-20">
<h1>Welcome!</h1>
<h3>Take a look around. Make yourself at home!
</div>
<section id="home-image" data-speed="6" data-type="background">
</section>
<section id="home" data-speed="4">
<div id="#robin" class="fullwidth row padding-10">
<div class="large-8 large-centered medium-12 small-12 columns">
<h2>I am a web developer</h2>
<h4>Need a website created or updated? Get in touch!</h4>
<br/><br/>
I've been developing websites for 3 years, since I started university. When I started university, most of the subject was new to me, having only studied database theory before.
Since 2012, I've tried my hand at many different forms of computing however I've found that I love developing websites, especially the front end (<i>how it looks</i>).
I'm now looking for work in Devon to help enhance my ability and start working in a commercial environment.
</div>
</div>
</section>
<section id='home-image-2' data-speed='6' data-type='background'></section>
<section id="home" data-speed="4">
<div id="#robin" class="fullwidth row padding-10">
<div class="large-8 large-centered medium-12 small-12 columns">
<h2>I began learning my craft at Plymouth University</h2>
<h4>But my learning never really stops! </h4>
<br/><br/>
I studied computing, covering a range of subjects. Web development isn't my only skill, it's what I love, but I've had experience working with so much more.
Due to the nature of the course, I have worked with C#, C, ASP.NET, Java, HTML, CSS, Javascript, PHP .. and that's just coding languages! I've worked with MySQL, SQL Server, and Oracle databases.
On top of programming, I've had a lot of experience working with the "business end" of software development, meaning that I am able to do (or understand) a lot more than just coding up a design that's been made for me.
<br/>I've had to:
<br/>
<ul>
<li>Design projects from just an idea; creating proper design documentation such as Entity Relationship Diagrams and Concept Maps</li>
<li>Test on the go; by myself, and with real users, getting as much feedback as possible</li>
<li>Work with a team; using methodologies such as Agile (SCRUM) to help this process</li>
<li>Create projects which have both a short (less than a month) and long (up to a year) development schedule</li>
<li>Learn on the go! - I don't know everything, but I'm persistent and dedicated and will always find a way to complete my objective</li>
</ul>
</div>
</div>
</section>
<section id='home-image-3' data-speed='6' data-type='background'></section>
<section id="home" data-speed="4">
<div id="#robin" class="fullwidth row padding-10">
<div class="large-8 large-centered medium-12 small-12 columns">
<h2>I am a gamer, among other things</h2>
<h4>After all, you can't work all the time!</h4>
<br/><br/>
While I love developing websites, everybody needs some time for their hobbies. In my spare time I love to play video games. Maybe it's because it's so diverse, being both social and mentally stimulating in many ways.
Living in Plymouth also provides a great opportunity to visit local beaches and go on the occasional day out surfing.
</div>
</div>
</section>
<script src="js/vendor/jquery.js"></script>
<script src="js/foundation.min.js"></script>
<script>
$(document).foundation();
</script>
<script src="js/vendor/modernizr.js"></script>
<script>
$("#includeHeader").load("Navigation.html");
</script>
<script src="js/parallax.js"></script>
</body>
parallax.js
$(document).ready(function(){
// cache the window object
$window = $(window);
$('section[data-type="background"]').each(function(){
// declare the variable to affect the defined data-type
var $scroll = $(this);
$(window).scroll(function() {
// HTML5 proves useful for helping with creating JS functions!
// also, negative value because we're scrolling upwards
var yPos = -($window.scrollTop() / $scroll.data('speed'));
// background position
var coords = '50% '+ yPos + 'px';
// move the background
$scroll.css({ backgroundPosition: coords });
}); // end window scroll
}); // end section function
}); // close out script
//creates html5 element in IE
document.createElement("section");
CSS
.darkgrey {
background-color: rgb(30,30,30);
}
.shadow {
box-shadow: 0px 0px 10px 2px black;
}
.border {
border-style: solid;
color: black;
border-width: 1px;
}
div.overlay {
position: absolute;
top: 0px;
}
a.darken {
display: block;
background: black;
}
a.darken img {
display: block;
opacity: 0.9;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover img {
opacity: 0.25;
}
h2.brighten, h4.brighten{
display: block;
opacity: 0;
color: white;
-webkit-transition: all 0.5s linear;
-moz-transition: all 0.5s linear;
-ms-transition: all 0.5s linear;
-o-transition: all 0.5s linear;
transition: all 0.5s linear;
}
a.darken:hover h2.brighten, a.darken:hover h4.brighten{
opacity: 1;
}
.caption {
position: absolute;
top: 40%;
left: 0px;
color: #ffffff;
text-align:center;
font-weight:bold;
opacity:0.7;
z-index: 10;
}
.relative {
position: relative;
}
.fullwidth {
width: 80%;
margin-left: auto;
margin-right: auto;
max-width: 80% !important;
}
.fullheight {
height: 100% !important;
}
.padding-10 {
padding: 10px;
margin-bottom: 0;
}
.padding-20 {
padding: 20px;
}
.paddingtb-10 {
padding-top: 10px;
padding-bottom: 10px;
}
.paddingtb-20 {
padding-top: 20px;
padding-bottom: 20px;
}
.margin-10 {
margin: 10px;
}
.margin-20 {
margin: 20px;
}
.margintb-10 {
margin-top: 10px;
margin-bottom: 10px;
}
.margintb-20 {
margin-top: 20px;
margin-bottom: 20px;
}
.lightborder {
border: 1px #5C5B5A solid;
border-radius: 3px;
transition: transform 500ms ease-in-out;
}
#home-image {
background: url(../img/keyboard.jpg) 50% 0 fixed;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}
#media (max-width: 1280px) {
#home-image {
background: url(../img/keyboard1280.jpg) 50% 0 fixed;
padding: 200px 0;
}
}
#media (max-width: 760px) {
#home-image {
background: url(../img/keyboard720.jpg) 50% 0 fixed;
padding: 100px 0;
}
}
#media (max-width: 480px) {
#home-image {
background: url(../img/keyboard480.jpg) 50% 0 fixed;
padding: 60px 0;
}
}
#home-image-2 {
background: url(../img/plymouth.jpg) 50% 0 fixed;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}
#media (max-width: 1280px) {
#home-image-2 {
background: url(../img/plymouth.jpg) 50% 0 fixed;
padding: 200px 0;
}
}
#media (max-width: 760px) {
#home-image-2 {
background: url(../img/plymouth720.jpg) 50% 0 fixed;
padding: 100px 0;
}
}
#media (max-width: 480px) {
#home-image-2 {
background: url(../img/plymouth480.jpg) 50% 0 fixed;
padding: 60px 0;
}
}
#home-image-3 {
background: url(../img/console.jpg) 50% 0 fixed;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}
#media (max-width: 1280px) {
#home-image-3 {
background: url(../img/console1280.png) 50% 0 fixed;
padding: 200px 0;
}
}
#media (max-width: 760px) {
#home-image-3 {
background: url(../img/console720.png) 50% 0 fixed;
padding: 100px 0;
}
}
#media (max-width: 480px) {
#home-image-3 {
background: url(../img/console480.png) 50% 0 fixed;
padding: 60px 0;
}
}
A small change will fix what I believe is your problem. Simply stop the PS4 background repeating and set the background white...
#home-image-3 {
background: rgb(255, 255, 255) url(../img/console.jpg) 50% 0 fixed no-repeat;
height: auto;
margin: 0 auto;
width: 100%;
position: relative;
box-shadow: 2px 2px 20px rgba(0,0,0,0.8);
padding: 300px 0;
}
Related
I do have a feeling that this post will get a lot more negative responses as compared to positive ones but it's ok, one response containing the correct answer is worth it!
Ok, this feature is a bit hard to explain in words. I want to add a loading animation whenever a button from the navigation bar is clicked. It should take up 100vh height and 100vw width and should be from right to left and then disappear. (Need help with both CSS and js, maybe HTML too)
I suggest checking out https://www.jacekjeznach.com using a laptop. You can see the really cool loading animation going on when you click on any of the options from the main navigation bar situated on the left side of the website
I know I can't make the exact effect without becoming an expert in web development. I even checked out the GitHub repo of his portfolio but there was no index.html there. A lot of .jsx files (ReactJS) though.
I know the basics of HTML, CSS, JS and never worked with any frameworks (not been more than 2 months since I started learning web dev) but I need help with this project because it is a college assignment.
I chose to make an eLearning website, similar to what this guy teaches(using webflow and few backend tools like MemberStack, Airtable & Zapier): https://www.youtube.com/watch?v=1-_rGcBQLzE&list=PL23ZvcdS3XPINPbP6y06tcLY_rZLi8euf
I am allowed to use any frameworks but I am not allowed to use any website building tools(I can't explain the complex javascript code if I ignore the instructions and use it anyway). Connection to the backend is a plus point but not a requirement.
Currently I am just making the basic homepage of the website and its code is:
<!DOCTYPE html>
<html lang="en">
<head>
<title>Document</title>
<style>
.slide {
width: 97vw;
height: 97vh;
margin: auto;
}
.wrapper {
display: flex;
flex-direction: row;
width: 500vw;
transform: rotate(90deg) translateY(-97vh);
transform-origin: top left;
}
.one {
background: #efdefe;
}
.two {
background: #a3f3d3;
}
.three {
background: rgb(245, 228, 228);
}
.four {
background: #ffddcc;
}
.five {
background: rgb(245, 241, 225);
}
.outer-wrapper {
width: 97vh;
height: 97vw;
margin: auto;
transform: rotate(-90deg) translateX(-97vh);
transform-origin: top left;
overflow-y: scroll;
overflow-x: hidden;
position: absolute;
scrollbar-width: none;
-ms-overflow-style: none;
}
::-webkit-scrollbar {
display: none;
}
.wrap-class {
margin-left: 1vw;
display: flex;
align-items: middle;
justify-content: space-around;
height: 100vh;
width: 10vw;
align-content: space-between;
justify-content: center;
position: fixed;
flex-direction: column;
vertical-align: center;
}
/*Code for the horizontal navbar on left side: */
.navbar {
width: 10vw;
height: auto;
}
.margin1vh {
margin-top: 0.7vh;
margin-bottom: 0.7vh;
}
a:-webkit-any-link {
text-decoration: none;
color: white;
padding: 1vw;
padding-left: 0;
display: block;
/* padding: 3vh 1vw 3vh 1; */
height: 100%;
width: 100%;
}
button {
background-color: black;
display: block;
width: 100%;
box-shadow: inset 2px 2px black, 4px 4px 0 grey;
}
button:hover {
transform: scale(1.1);
}
html {
background-color: black;
/* filter: invert(1); */
scroll-behavior: smooth;
}
/*This code allow us to add linear gradient to a text*/
p,
h1 {
display: block;
margin-left: 31%;
margin-top: 5000px !important;
max-width: 1vw;
background: rgb(2, 0, 36);
background: radial-gradient(circle,
rgba(2, 0, 36, 1) 0%,
rgba(165, 106, 108, 1) 0%,
rgba(175, 99, 99, 1) 0%,
rgba(148, 116, 123, 1) 0%,
rgba(91, 153, 175, 1) 0%,
rgba(62, 172, 200, 1) 0%,
rgba(194, 226, 162, 1) 0%,
rgba(0, 212, 255, 1) 0%,
rgba(18, 255, 21, 1) 14%,
rgba(230, 65, 87, 1) 29%,
rgba(194, 185, 52, 1) 46%,
rgba(43, 83, 210, 1) 64%,
rgba(59, 221, 55, 1) 80%,
rgba(222, 85, 217, 1) 92%);
-webkit-background-clip: text;
background-clip: text;
/*for compatibility with safari browser*/
-webkit-text-fill-color: transparent;
display: inline;
background-size: 300%;
animation: bg-animation 17s infinite;
}
#keyframes bg-animation {
0% {
background-position: left;
}
50% {
background-position: right;
}
100% {
background-position: left;
}
}
/*Now, let's add the animation that happens when a button of fixed position is clicked: */
.animation-on-click {
min-width: 100vw;
min-height: 100vh;
background-color: black;
animation-name: animate;
animation-duration: 2s;
animation-iteration-count: 1;
overflow: visible;
}
#keyframes animate {
0% {
transform: translateX(100%);
}
100% {
transform: translateX(-100%);
}
}
</style>
</head>
<body>
<div class="outer-wrapper">
<div class="wrapper">
<div class="slide one" id="one">
<div>
<br />
<br />
<h1>Welcome to the website</h1>
</div>
</div>
<div class="slide two" id="two">
<div>
<br />
<br />
<h1>Welcome to the eLearning website</h1>
</div>
</div>
<div class="slide three" id="three"></div>
<div class="slide four" id="four"></div>
<div class="slide five" id="five"></div>
</div>
</div>
<div class="wrap-class">
<div class="navbar">
<button>
Home
</button>
<div class="margin1vh"></div>
<button>
About
</button>
<div class="margin1vh"></div>
<button>
Website
</button>
<div class="margin1vh"></div>
<button>
Support
</button>
<div class="margin1vh"></div>
<button>
Contact
</button>
</div>
</div>
<script>
function clicked() {
var element = document.getElementById("one");
element.classList.add("animation-on-click");
setTimeout(function () {
element.classList.remove("animation-on-click");
}, 2000);
}
</script>
</body>
</html>
I just need a loading animation (without a loading bar should also work) but it should be done on the whole screen. I think I might change the background color of all the elements in CSS horizontal flexbox to black also because black is the best background and it will allow me to change width ad height attributes of the .slide class and translateX and translateY functions from 97vw, 97vh to 100vw, 100vh (as they were in the original code)
Btw, I have combined the codes of CSS and JS files in the HTML file here to be able to share the code here on StackOverflow.
You can visit https://github.com/shubham-garg1/web-project to check the GitHub code. I have also published the work done till now online so you can go to http://www.elearningweb.tk and check the sources files.
Any help is appreciated, thanks.
They're actually pretty easy to do if you just want a spinner, but a "loading" animation should be tied to a "loading" process. Without making any assumptions, lets consider some native Javascript Ajax call...
var xmlhttp = new XMLHttpRequest();
document.getElementById("myLoader").style.display = "block";
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("myLoader").style.display = "none";
}
}
};
xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();
You can just throw an animation inside your myLoader div... If you want to get a little fancy, you can use Javascript to animate it after you load it.
Let's grab some code: I'll grab it from https://www.w3schools.com/howto/howto_css_flip_card.asp.
It's just a card flip on hover, but I've removed the hover part.
The important part here is in the flip-card-inner portion of the CSS. It's going to dictate to Javascript how long the animation process should take. If you want a longer one, just adjust the transition value.
JsFiddle: https://jsfiddle.net/L1fk0nhm/
<style>
.flip-card {
background-color: transparent;
width: 300px;
height: 200px;
border: 1px solid #f1f1f1;
perspective: 1000px;
}
.flip-card-inner {
position: relative;
width: 100%;
height: 100%;
text-align: center;
transition: transform 0.8s;
transform-style: preserve-3d;
}
.flip-card-front, .flip-card-back {
position: absolute;
width: 100%;
height: 100%;
-webkit-backface-visibility: hidden; /* Safari */
backface-visibility: hidden;
}
.flip-card-front {
background-color: #bbb;
color: black;
}
.flip-card-back {
background-color: dodgerblue;
color: white;
transform: rotateY(180deg);
}
</style>
<div class="flip-card">
<div id="myLoader" class="flip-card-inner">
<div class="flip-card-front">
I'm hiding stuff that's loading!
</div>
<div id="loadedStuff" class="flip-card-back">
</div>
</div>
</div>
We can actually have it flip on load, using Javascript after the inside of the element has loaded.
var xmlhttp = new XMLHttpRequest();
xmlhttp.onreadystatechange = function() {
if (xmlhttp.readyState == XMLHttpRequest.DONE) {
if (xmlhttp.status == 200) {
document.getElementById("loadedStuff").innerHTML = xmlhttp.responseText;
animatedCardRotation(document.getElementById("myLoader"), 0, 180);
}
}
};
xmlhttp.open("GET", "https://www.httpbin.org/get", true);
xmlhttp.send();
function animatedCardRotation (Element, startDegree, endDegree) {
if(startDegree < endDegree ) {
startDegree += 10;
Element.style.transform = `rotateY(${startDegree}deg)`;
requestAnimationFrame( () => this.animatedCardRotation(Element, startDegree, endDegree) );
}
}
Combining requestAnimationFrame here really adds a lot to your CSS animations. You can virtually do any kind of CSS transformation here and if you have something that loads in chunks, it can help you build a very accurate "loading bar".
I want to make a game in React.js simlar to this:
https://www.youtube.com/watch?v=LfgyRk2QpJw
This is what I have so far:
https://door-game.netlify.com/
Here is the key code:
class App extends Component {
getComponent(event) {
event.currentTarget.style.animation = 'App-logo-spin 2s linear';
}
render() {
return (
<div className="App">
<header className="App-header">
<div className="App-logo" alt="logo" onClick=
{this.getComponent.bind(this)}>
<div className="little-circle one"></div>
<div className="little-circle two"></div>
<div className="little-circle three"></div>
<div className="little-circle four"></div>
</div>
For now onClick works only once, how can I make it work unlimited times?
I think Neil has provided a good solution if you want to make the rotation animation work unlimited time, here I will provide a different solution you might find it useful, and more closed to the effect in the youtube video.
Instead of using animation, I will use rotateZ() from transform which can achieve the same effect, and also you can setup the rotation degree per click.
The flow is:
Storing the current rotate degree in the state.
Use click handler to update the state.
Update the circle style based on the state in render().
Here is the codepen: https://codepen.io/anon/pen/pWxjEE
Hope this helps :)
The problem that you've got here is that basically the css animation relies on seeing "Hey there's been an animation flag added to an element" to know to do the animation. As Neil, suggested removing it and re-adding it seems like it will do the job BUT when you set it to " " and add it again one line after the other, the process that watches for animation flags just doesn't notice that it was gone. So it continues to think that it has been there the whole time.
The situation is pretty well described at CSS Tricks -Restarting an Animation
The punch line of the article is that your unclick function should look like
getComponent(event) {
event.currentTarget.style = ' ';
void event.currentTarget.offsetWidth;
event.currentTarget.style.animation = 'App-logo-spin 2s linear';
}
I've tested this code best as I can from the static js and got it working, so I'm hopeful it works when it's in the App.js file.
var appLogos = document.getElementsByClassName('App-logo');
var currentElement;
for (var i = 0, len = appLogos.length; i < len; i++) {
appLogos[i].addEventListener('click', animate, false);
}
function animate(e) {
currentElement = e.currentTarget;
currentElement.style.animation = 'unset';
setTimeout(function() {run(currentElement)}, 100);
}
function run(el) {
el.style.animation = 'App-logo-spin 2s linear';
}
body {
margin: 0;
padding: 0;
font-family: sans-serif
}
.App {
text-align: center
}
.App-logo {
height: 80px;
width: 80px;
background: #fff;
border-radius: 50%;
z-index: 2;
display: -ms-flexbox;
display: flex;
-ms-flex-align: stretch;
align-items: stretch;
-ms-flex-pack: justify;
justify-content: space-between;
position: relative;
cursor: pointer
}
.App-logo-animation: {
-webkit-animation: App-logo-spin 2s linear;
animation: App-logo-spin 2s linear
}
.App-header {
background-color: #222;
height: 200px;
padding: 20px;
color: #fff;
display: -ms-flexbox;
display: flex;
-ms-flex-pack: center;
justify-content: center;
-ms-flex-align: center;
align-items: center;
position: relative
}
.big-logo {
height: 120px;
width: 120px;
background: red;
z-index: 1
}
.big-logo,
.biggest-logo {
position: absolute;
border-radius: 50%
}
.biggest-logo {
height: 150px;
width: 150px;
background: blue;
z-index: 0
}
.little-circle {
width: 10px;
height: 10px;
background-color: green;
border-radius: 50%
}
.App-title {
font-size: 1.5em
}
.App-intro {
font-size: large
}
.four,
.one,
.three,
.two {
position: absolute
}
.one {
top: 15px;
left: 15px
}
.two {
top: 15px;
right: 15px
}
.three {
bottom: 15px;
right: 15px
}
.four {
bottom: 15px;
left: 15px
}
.un {
top: 20px;
left: 20px
}
.dos {
top: 20px;
right: 20px
}
.tres {
bottom: 20px;
right: 20px
}
.quatro {
bottom: 20px;
left: 20px
}
.ein {
top: 22px;
left: 22px
}
.zwei {
top: 22px;
right: 22px
}
.drei {
bottom: 22px;
right: 22px
}
.fier {
bottom: 22px;
left: 22px
}
.submit {
width: 60px;
height: 60px;
position: absolute;
bottom: 140px;
background-color: #8a2be2;
cursor: pointer;
border-radius: 50%
}
#-webkit-keyframes App-logo-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
#keyframes App-logo-spin {
0% {
-webkit-transform: rotate(0deg);
transform: rotate(0deg)
}
to {
-webkit-transform: rotate(1turn);
transform: rotate(1turn)
}
}
/*# sourceMappingURL=main.ea098249.css.map*/
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1,shrink-to-fit=no">
<meta name="theme-color" content="#000000">
<title>React App</title>
</head>
<body><noscript>You need to enable JavaScript to run this app.</noscript>
<div id="root">
<div class="App">
<header class="App-header">
<div class="App-logo" alt="logo">
<div class="little-circle one"></div>
<div class="little-circle two"></div>
<div class="little-circle three"></div>
<div class="little-circle four"></div>
</div>
<div class="App-logo big-logo" alt="logo">
<div class="little-circle one un"></div>
<div class="little-circle two dos"></div>
<div class="little-circle three tres"></div>
<div class="little-circle four quatro"></div>
</div>
<div class="App-logo biggest-logo" alt="logo">
<div class="little-circle one ein"></div>
<div class="little-circle two zwei"></div>
<div class="little-circle three drei"></div>
<div class="little-circle four fier"></div>
</div>
</header>
</div>
</div>
</body>
</html>
The onClick() function is fired multiple times.
(Here 6 says the number of times I clicked the li element and the onClick function was fired.)
But you are setting the css animation for your division without resetting it.
Reset the the animation on every click before setting it. It should work.
Initial suggestion that only worked from the console:
getComponent(event) {
event.currentTarget.style.animation = 'unset';
event.currentTarget.style.animation = 'App-logo-spin 2s linear';
}
This did not work because, the two statements were executed so fast that it does't actually take effect.
That's why a timeout is required as shown in the working code above.
First of all, you can find a simplified demo of my code in this JSFiddle and also below the question. I found that my problem happens the way I describe it in Google Chrome, so if you plan to try and fix the bug, please use that browser. I apologize if the code is not very well simplified; please consider that this is a snippet from a bigger project.
I'm working on a webapp that uses JQuery and GreenSock's TweenLite for animations.
This app consists on some menus that control everything, that are transitioned between using the bodyChange() function. This function has two parameters:
nextOrPrev, that runs one animation or another based on the value
provided ("next" or "prev"). Only the "next" animation is done yet, but that is not important for now. The "prev" animation, not yet used, just emits an alert("prev").
bodyFunction. The function provided will fill the body with the elements necessary for that menu, and the wrap them in a #bodyWrap.
In the demo I provide you with there are only two menus: The first one, mainMenu, with only a #playButton. When you click it, the bodyChange() function is called with the following parameters: ("next", playSettingsBody), playSettings being the second menu.
This is the problem: when you click the playButton, the button goes up a on the screen and then executes the TweenLite animation. I can't see, however, why does the button "jump up", instead of staying in the same place and execute the animation. This is probably due to a small mistake. What is it?
Thanks for any help.
mainMenuBody();
function mainMenuBody() {
$("body").append(
//BUTTONS
"<div id='playButton' class='mainButton'><div class='buttonText mainButtonText text'>PLAY</div></div>"
);
//WRAP
$("body").wrapInner("<div id='bodyWrap'></div>");
//BINDS
$("#playButton").bind("click", function() {
bodyChange("next", playSettingsBody);
});
}
function bodyChange(nextOrPrev, bodyFunction) {
switch (nextOrPrev) {
case "next":
//ANIMATION AND BODY CHANGE
TweenLite.to($("#bodyWrap"), .4, {
ease: Power2.easeIn,
transform: "rotateY(90deg)",
onComplete: function(){
$("body").empty();
//NEW STUFF
bodyFunction();
TweenLite.from($("#bodyWrap"), .4, {
ease: Power2.easeOut,
transform: "rotateY(90deg)"
});
}
});
//END OF ANIMATION AND BODY CHANGE
break;
case "prev":
alert("prev");
}
}
function playSettingsBody() {
$("body").append(
"<p class='text' id='CYTText'>This is the second menu!</p>"
);
}
body{
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow:hidden;
margin: 0;
}
.text {
color: #FFFFFF;
font-family:Bebas Neue;
-webkit-user-select: none;
cursor: default;
text-shadow: 3px 3px 2px rgba(0,0,0,0.2);
}
.mainButton {
-webkit-transform:scale(1);
width: 200px;
height: 200px;
border: 10px solid #F1F2F0;
text-align:center;
background-color: #F37C2B;
/*background:#5F4A21;*/
display: table;
position: absolute;
margin: auto;
top: 150px;
bottom: 0;
-webkit-transition: all 0.5s ease;
cursor: pointer;
box-shadow: 0px 0px 30px rgba(0,0,0,0.4);
}
.mainButtonText {
position: relative;
display:table-cell;
vertical-align:middle;
-webkit-transform:scale(1);
font-size: 90px;
text-shadow: 4px 4px 2px rgba(0,0,0,0.2);
-webkit-transition: all 0.5s ease;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
This problem is caused in your .mainButton class. Your code looks a little like this.
.mainButton {
position: absolute;
top: 150px;
bottom: 0;
//rest
}
By removing the line bottom: 0; your JSFiddle now works as expected. However, if you remove the line top: 150px; instead and leave in the bottom: 0 the problem still occurs. Unfortunately, I cannot provide an explanation for this. It might be worth posting a question on the GSAP forums inquiring about why this occurs works when positioning using bottom but not when using top
Edit
Since you need bottom: 0 and I wasn't able to fix your code I wrote an example which works using Timeline, a GSAP plugin. You can see this JSFiddle or the code example below.
var tl = new TimelineMax();
tl.pause();
tl.fromTo($("#click"), 1, {rotationY: 0, ease: Power2.easeOut}, {rotationY: 90, transformOrigin:"right", ease: Power2.easeOut})
.set($("#click2"), {css:{display: "table"}}, "-=0.6")
.fromTo($("#click2"), 1, {rotationY: -90, ease: Power2.easeOut}, {rotationY: 0, transformOrigin:"left", ease: Power2.easeOut}, "-=0.6");
$("#click").click(function() {
tl.play();
});
$("#click2").click(function() {
tl.reverse();
});
* {
margin: 0;
padding: 0;
}
body {
background-image: url("../resources/pics/Vignette2.png");
background-repeat: no-repeat;
background-position: center center;
background-attachment: fixed;
background-color: #02BFC1;
overflow: hidden;
}
div.one, div.two {
position: absolute;
bottom: 0;
height: 200px;
width: 200px;
background: #F37C2B;
text-align: center;
display: table;
cursor: pointer;
border: 10px solid #F1F2F0;
}
div.one .text, div.two .text {
position: relative;
display: table-cell;
vertical-align: middle;
color: #FFFFFF;
font-family: Bebas Neue;
font-size: 90px;
}
div.two {
display: none;
border-color: transparent;
background: none;
}
div.two .text {
font-size: 40px;
}
<script src="https://code.jquery.com/jquery-3.1.0.min.js" integrity="sha256-cCueBR6CsyA4/9szpPfrX3s49M9vUU5BgtiJj06wt/s=" crossorigin="anonymous"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/gsap/1.19.0/TweenMax.min.js"></script>
<div id="click" class="one">
<div class="text">
Play
</div>
</div>
<div id="click2" class="two">
<div class="text">
Second Menu
</div>
</div>
I am trying to figure out how I can trigger a waypoints function. Right now this function starts when my info div is at the very top of the screen. Ideally, I want this to start when the user's bottom of the screen just gets to the info-box section. I am unsure of how I can even modify when the event triggers.
Also, for some reason the info-boxes aren't transitions to the right like I am attempting. They just transition into a fade with now horizontal movement. What is wrong with what I am trying?
var $info_show = $('#info');
$info_show.waypoint(function () {
$('.info-box').addClass("fadeShow");
});
#info {
max-width: 100%;
height: auto;
padding: 300px 20%;
}
.info-box {
border: 1px solid black;
padding: 50px;
background: #00f;
color: #fff;
display: inline;
margin: 0 100px;
transition: 1s;
opacity: 0;
}
.info-box.fadeShow {
opacity: 1;
transform: translateX(150px);
}
<script src="https://leaverou.github.io/prefixfree/prefixfree.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<div id="info">
<div class="info-box">Red</div>
<div class="info-box">Blue</div>
<div class="info-box">Green</div>
</div>
I'm trying to have my header change opacity when you scroll down say aproximatly 500px down. I'm making a single page with a header infront of a bxslider so when I scroll down the opacity should increase for the header because the text still needs to be readable.
http://ironsummitmedia.github.io/startbootstrap-scrolling-nav/
I'd like something like this but I find it very hard to edit
I already tried to look for answers here but only thing close to this is: Header changes as you scroll down (jQuery) or Fade opacity when scrolling but the one doesn't work for me and the other is to hard to understand and change
<header class="main-header">
<img src="images/logo.png"/>
<nav>
<a id="active" href="#Platenbeurs">Platenbeurs</a>
Voorstelling
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
EDIT
Here is the css code to see that the header is actualy not opacity 1.
.main-header{ position: fixed; max-width: 1024px; width: 100%; height: 100px; padding: 1%; text-align: right; background: rgba(255,255,255,0.2); border-top: 5px solid black; border-bottom: 5px solid black; }
.main-header nav a{ color: white; text-decoration: none; opacity: 1; }
If fixed it myself...
HTML
<header class="main-header clearfix">
<img src="images/logo.svg"/>
<nav>
Platenbeurs
Voorstelling
Artiesten
Planning
Grondplan
Praktische Info
Bestel
</nav>
</header>
CSS
.main-header{
position: fixed;
width: 100%;
z-index: 101;
padding: 15px;
text-align: right;
background-color: rgba(0,0,0,0.2);
border-top: 5px solid black;
}
.main-header nav a{
color: white;
text-decoration: none;
opacity: 1;
}
Javascript
$(window).scroll(function(event){
if($(document).scrollTop() > 300){
if(header.data('opacity') == 'start'){
header.data('opacity','scrolled');
header.css("background", "rgba(0,0,0,1)");
}
}else{
if(header.data('opacity') == 'scrolled'){
header.data('opacity','start');
header.css("background", "rgba(0,0,0,0.2)");
}
}
});
The opacity off the header is already 1. You can't increase the opacity, instead you can set the background color for header on scroll. Please refer the following snippet: http://jsfiddle.net/uy25hw21/