4 Correct answers
To make the hamburger icon rotate on the first click and return to its original position on the second click, you can use the classList.toggle() method in JavaScript. This method adds a class if it's absent and removes it if it's present, facilitating the alternation between two states.
Here's how you can adapt your code:
const bento_box_wrapper = document.querySelector('.bento_box_wrapper');
bento_box_wrapper.onclick = function() {
const overlayWrapper = document.querySelector('.over
I initially wanted it to rotate clockwise 45 degrees on the second toggle- so that it appeared to return to its original state yet all rotations would be clockwise - but this works..
Just alter the script a little bit - see additions in red below, plus a line commented out in green.
<script>
const bento_box_wrapper = document.querySelector('.bento_box_wrapper');
let rotate = 0;
bento_box_wrapper.onclick = function() {
const overlayWrapper = document.querySelector('.overlayWrapper');
overlayWrapper.
@REELHERO wrote:
Can I adjust the code so that it fades out completely before the new one comes in
Sure, just add a setTimeout function to the script which delays the text fading in by 1 second:
setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1000)
@REELHERO wrote:
also I am trying to get all the reviews no matter what the length to justity right (or align right) so they all end at the far right of "PITCH LAB" but float and text align are not working
I would make your 'review_co
isnt that already in the original script though?
setTimeout(function() { reviews[current].style.opacity = '1'; }, 1500)
That one just fades in the initial review so you don't have to wait 5 seconds for it to appear.
I'm sure you have worked it out by now:
setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;
setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1000)
}, 5000)
33
Replies
I initially wanted it to rotate clockwise 45 degrees on the second toggle- so that it appeared to return to its original state yet all rotations would be clockwise - but this works..
Just alter the script a little bit - see additions in red below, plus a line commented out in green.
<script>
const bento_box_wrapper = document.querySelector('.bento_box_wrapper');
let rotate = 0;
bento_box_wrapper.onclick = function() {
const overlayWrapper = document.querySelector('.overlayWrapper');
overlayWrapper.classList.toggle('overlayWrapperSlideDown');
const mainNavLinksWrapper = document.querySelector('.mainNavLinksWrapper');
mainNavLinksWrapper.classList.toggle('mainNavLinksWrapperSlideUp');
rotate = rotate + 405;
bento_box_wrapper.style.transform = `rotate(${rotate}deg)`;
// Add or remove the 'rotated' class to manage the rotation
// bento_box_wrapper.classList.toggle('rotated');
}
</script>
In reference to your other issue regarding the play/pause button it's best to ask the developer of the script. The script uses jQuery which I'm not totally familar with BUT it would seem you need to add the pause button when the page initially loads. I would have thought this would be one of the options available as the script uses an 'auto' play option on page load, so why would you want to show a play button initially if that option is selected.
subtle change but i think its more elegant with the continuous direction..
By @REELHERO
I agree in this case.
Not sure quite what was happening before but it seemed to be turning anti clockwise on the first click, which felt counter intuitive to me.
I think had it been going in a clockwise direction on first click and then anti clockwise on the second click it would have been passable.
As it is l quite like it rotating clockwise on each click.
I added a little fade-in and out review sequence (below the video)
with pure css.. however I want it to loop continuously - there are temp lines in there but Ill have 6-8 -
but I believe I need JS for that.. is that correct? Can you point out how i might do that?
By @REELHERO
The below should work.
<style>
#review_container {
position: relative;
}
.reviewText {
font-size: .9vw;
font-family: "kanitlight", sans-serif;
font-weight: 100;
letter-spacing: .05vh;
color:#022d2c;
position: absolute;
line-height: 1;
transition: opacity 1s ease;
opacity: 0;
}
</style>
<div id="review_container">
<h1 class="reviewText">Top designers to help elevate your film, commercial, or music video pitch decks</h1>
<h1 class="reviewText">100% hit rate whenever we used Pitch lab helping us crush the competition - A24</h1>
<h1 class="reviewText">The deck was napalm by the time we hit the room they were sold and floored - Tool</h1>
</div>
<script>
let current = 0,
reviews = document.querySelectorAll(".reviewText");
setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1500)
setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;
reviews[current].style.opacity = '1';
}, 5000)
</script>
@REELHERO wrote:
Can I adjust the code so that it fades out completely before the new one comes in
Sure, just add a setTimeout function to the script which delays the text fading in by 1 second:
setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1000)
@REELHERO wrote:
also I am trying to get all the reviews no matter what the length to justity right (or align right) so they all end at the far right of "PITCH LAB" but float and text align are not working
I would make your 'review_container' width 100% and give it the same right position as your 'review-title' css class
#review_container{
position: fixed;
right: 10vw;
width: 100%;
bottom:24vh;
}
Then apply width: 100% to your 'reviewText' css class. You have 2 declarations of the .reviewText css class, so I would remove one, so only the values below are present.
.reviewText {
font-size: .9vw;
font-family: "kanitlight", sans-serif;
font-weight: 100;
letter-spacing: .05vh;
color:#022d2c;
position: fixed;
line-height: 1;
transition: opacity 1s ease;
opacity: 0;
text-align: right;
width: 100%;
}
See if that positions the text where you require it to be.
isnt that already in the original script though?
setTimeout(function() { reviews[current].style.opacity = '1'; }, 1500)
That one just fades in the initial review so you don't have to wait 5 seconds for it to appear.
I'm sure you have worked it out by now:
setInterval(function() {
reviews.forEach((review) => {
review.style.opacity = '0';
});
current = (current !== reviews.length - 1) ? current + 1 : 0;
setTimeout(function() {
reviews[current].style.opacity = '1';
}, 1000)
}, 5000)
AdChoices