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.
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 am making a portfolio website and having trouble with something. When I hover over an image of a project, the image grows in size, has reduced opacity and a description of the project appears. However, I want to be able to add a link with the description. The problem is when I hover over the link the image returns to it's default state, meaning the image shrinks back, is opaque and the description fades away along with the link.
I have tried restructuring the javascript and css around but haven't gotten any solutions.
JavaScript:
const projectNode = (project) => {
return (
<div className="Project">
<div>
<div className="previewProject">
<img className="Project-image" src={project.image} alt="project-images" />
<div className="Project-info" >{project.description}<br></br>
<a className="project-link" href={project.github}>GITHUB</a>
</div>
</div>
</div>
</div>
)
}
//CSS//
.previewProject {
display: flex;
justify-content: center;
align-items: center;
position: relative;
}
.Project-image {
opacity: 1.0;
filter: alpha(opacity=40);
transition: transform .3s;
border: solid 3.5px #606060;
/* Animation */
margin: 50px auto;
position: relative;
top: 0;
left: 0;
}
.Project-image+.Project-info {
opacity: 0;
transition: opacity 0.3s;
}
.Project-image:hover {
opacity: 0.2;
filter: alpha(opacity=100);
transform: scale(1.25);
}
.Project-image:hover+.Project-info {
opacity: 1;
color: black;
}
.Project-info {
font-family: 'Lato', sans-serif;
font-size: 21px;
width: 25%;
position: absolute;
pointer-events: none;
}
.project-link {
pointer-events: auto;
}
Your animation should relate to hovering on the parent .previewProject, so something like this:
.previewProject:hover .Project-image {
/* Do whatever */
}
I'm trying to make a simple pen with a button. When "on" is pressed the cover should slide and cover "on". When "off" is pressed the cover should cover "off". It works the way I have it, but when I try to add some transition effects nothing works. I tried adding transition-duration: 1s; to every class in the project but no luck.
Here's my codepen.
https://codepen.io/Alex-Iron/pen/eMORVV
My code is this:
HTML
<div id="switch" class="silver-background">
<div id="wrapper">
<div class="silver-background" id="cover">
<div id="cover-inner"></div>
</div>
<div id="on" class="on-left">on</div>
<div id="off">off</div>
</div>
</div>
SCSS
$radius: 7px;
$height: 100px;
$width: $height*1.5;
#switch{
width: $width*2.1;
height: $height*1.2;
display: grid;
position: relative;
}
.silver-background{
border-radius: $radius;
background: silver;
}
#wrapper{
margin: auto;
display: flex;
}
#on, #off, #cover, #cover-inner{
font-size: $height/3;
height: $height;
width: $width;
line-height: $height;
text-align: center;
text-transform: uppercase;
font-family: sans-serif;
}
#on{
background: radial-gradient(green, green, black);
border-radius: $radius 0 0 $radius;
color: lightgreen;
}
#off{
background: radial-gradient(#A00000, #A00000, black);
border-radius: 0 $radius $radius 0;
color: #EC6666*1.3;
}
#cover{
position: absolute;
border: 1px solid black;
width: $width*2.1/2;
height: $height*1.2;
display: grid;
top: 0;
}
#cover-inner{
width: $width*0.9;
background-color: white;
border-radius: $radius;
margin: auto;
}
.on-left{
left: 0;
}
.on-right{
right: 0;
}
My jQuery code.
$("#off").on('click',()=>{
$('#cover').removeClass('on-left');
$('#cover').addClass('on-right');
});
$('#on').on('click',()=>{
$('#cover').removeClass('on-right');
$('#cover').addClass('on-left');
})
I've updated your pen:
https://codepen.io/anon/pen/geOpgz
You should use the transition property of css:
#cover{
...
left: 0;
transition: 1s left;
}
The transition property can be used to animate a property value change. It is important, that your class only changes a property value f.e. left and not switches from left: 0 to right: 0:
#cover.on-left{
left: 0;
}
#cover.on-right{
left: $width;
}
In your case, the new value of your left property on right position is left: $width*2.1 / 2 cause your wrapper has the following width: width: $width*2.1.
By the way, i yould suggest you to use the toggleClass function of jquery:
$("#wrapper").on('click',()=>{
$('#cover').toggleClass('on-right');
});
Now you can click your wrapper on any position and it toggles the "on" and "off" with only one class .on-right and less javascript code:
https://codepen.io/anon/pen/QmWjwb
Your id="cover" should have on-left from start, and then give that #cover property transition: left 0.2s ease and class .on-right should have left: 150px since you cant transition from left: 0 to right: 0.
Here is the updated pen: https://codepen.io/zmuci/pen/JLjdEb
My goal is to make the "down-arrow.svg" change to "up-arrow.svg" if the image was "down-arrow.svg" when clicked on the upper div which contains this image and versa via.
I have looked up the past questions and answers, found something but they couldn't solve my problem, these index.html and index.js files grows from one of the answers written here. What am I doing wrong? Thank you in advance.
index.html:
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
...
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="svg/down-arrow.svg" >
</div>
</div>
...
</body>
index.js:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "svg/down-arrow.svg") {
document.getElementById("up-down-arrow").src = "svg/up-arrow.svg";
}
else {
document.getElementById("up-down-arrow").src = "svg/down-arrow.svg";
}
}
stylesheet.css:
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
I think you just need to change your image source and not the ID of it.
So with your HTML structure i can guide you with changing just the ID of the img tag.
The Solution is as below:
function changeArrow() {
//First grabing the current Source in below varaiable.
var img = document.getElementById('arrowSvg').src;
/*
** Now checking if it does match with path that we have in variable.
** And updating src based on the current src of image.
*/
if (img.indexOf('svg/down-arrow.svg') != -1) {
document.getElementById('arrowSvg').src = 'svg/up-arrow.svg';
} else {
document.getElementById('arrowSvg').src = 'svg/down-arrow.svg';
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<div id="open-menu" onClick=changeArrow()>
<div id="open-menu-inner">
<p id="open-menu-text"> Menü </p>
<img id="arrowSvg" src="svg/down-arrow.svg">
</div>
</div>
Hope this helps you.
Thanks!
The issue should be in your paths, with images from Google it works fine:
function changeArrow() {
if (document.getElementById("up-down-arrow").src == "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png") {
document.getElementById("up-down-arrow").src = "https://upload.wikimedia.org/wikipedia/commons/thumb/3/37/Octicons-arrow-small-up.svg/1000px-Octicons-arrow-small-up.svg.png";
}
else {
document.getElementById("up-down-arrow").src = "https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png";
}
}
div#open-menu {
height: 50px;
width: 90%;
border: 2px solid rgba(94, 94, 94, 0.5);
position: absolute;
margin-top: 180px;
left: 50%;
transform: translateX(-50%);
}
div#open-menu-inner {
position: absolute;
left: 50%;
transform: translateX(-50%);
line-height: 50px;
vertical-align: middle;
display: table;
}
p#open-menu-text {
font-size: 30px;
color: #5e5e5e;
position: absolute;
right: 0px;
}
img#up-down-arrow {
height: 26px;
width: 26px;
position: absolute;
top: 50%;
left: 0px;
transform: translateY(50%);
margin-left: 10px;
}
<head>
<title> Some Title </title>
<script src="index.js"></script>
<link type="text/css" href="stylesheet.css" rel="stylesheet">
</head>
<body>
<div id="open-menu" onClick=changeArrow() >
<div id="open-menu-inner" >
<p id="open-menu-text" > Menü </p>
<img id="up-down-arrow" src="https://d30y9cdsu7xlg0.cloudfront.net/png/242277-200.png" >
</div>
</div>
</body>
As an alternative, you may use classList.toggle instead. The idea of toggle is it will add the class if it's not present on the element, and remove it if it's present. It will be more optimize as well. Put the images into the class and toggle that class onClick so as the example below; see arrow-up on css and how it is used in toggle in javascript section. Initially the <div id="arrow".. has already an arrow class that's why you will see an arrow down icon, when the toggle is triggered, the element will become like this <div id="arrow" class="arrow arrow-up"></div> and this <div id="arrow" class="arrow"></div> alternatively. The toggling of arrow-up class gives the effect of changing arrow icons.
function changeArrow() {
var element = document.getElementById("arrow");
element.classList.toggle("arrow-up");
}
.open-menu {
padding: 20px;
position: absolute;
cursor: pointer;
background-color: #000000;
}
.arrow {
width: 16px;
height: 16px;
background: url('http://www.entypo.com/images/chevron-down.svg') no-repeat;
}
.arrow-up {
background: url('http://www.entypo.com/images/chevron-up.svg') no-repeat !important;
}
<div class="open-menu" onClick="changeArrow()" >
<div id="arrow" class="arrow"></div>
</div>
image's used on sample copyright to www.entypo.com
Replace
document.getElementById("up-down-arrow").src
with
document.getElementById("up-down-arrow").getAttribute('src')
src returns the full URL of the image
getAttribute('src') returns exactly what was in the HTML, i.e. the way that you wrote it
ps. I would also like to suggest a few potential improvements to your current HTML page:
I would recommend moving the JS import from the head to the bottom of the body tag just before closing it. This will make sure that the body of your webpage will render before downloading the JS file which will make the page render faster to your end users.
(This is because the way that the browser renders html is it executes
it line by line which means that it will stop to download the javascript file before executing anything else that comes after it, i.e. displaying the body of the webpage to the user.)
I would also recommend replacing the inline onClick function with an eventListener inside of your JS file that way you will have separation between your HTML and JS files which will make your website more maintainable as it grows in size
Depending on the size of your DOM it MIGHT also be faster to store, i.e. cache, the "up-down-arrow" node inside of a variable to avoid the performance cost of querying for that node inside of the DOM each time the user clicks on it, i.e.
$up_down_arrow = document.getElementById("up-down-arrow");
if ($up_down_arrow.getAttribute('src') === "bin2-lighter.svg") {
$up_down_arrow.setAttribute('src', 'bin2-darker.svg')
} else {
$up_down_arrow.setAttribute('src', 'bin2-lighter.svg');
}
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;
}