create account

Scroll up or down, this gallery works both ways by anomadsoul

View this thread on: hive.blog |  peakd.com |  ecency.com
hive-169321 · @anomadsoul · (edited)
$39.93
Scroll up or down, this gallery works both ways
I'm nowhere near ready to actually have a job as a FullStack Developer, but I'm slowly but steadily reaching that status; in the meantime, all I can do is grind.

Grinding, grinding, grinding. When we are talking code, it all comes down to grinding. The more you grind, practice your skills, find out about new tweaks, practice what you should already know by heart, and just putting your code to work... the more you will learn.

So that's what I am doing. I am already pretty efficient with my HTML and CSS code, I still need a lot of practice and a hell lot to learn regarding JavaScript - and don't worry, I've been taking my lessons religiously even though I haven't posted about JavaScript for something like two weeks; but the point is, these little projects are mainly about HTML and CSS and grinding my skills.

This is tenth post already about little projects based off online ideas and my plan is to join all of these ideas once I am ready and create my own CV website of my own where I'll showcase all that I've learned in a sort of interactive website. Heads up, I'm getting there, slowly but steady, more slowly than steady to be honest but what the hell, slow and steady wins the race.

In the meantime, I will leave you with one project Idea based off on Brad Traversy's paid course on Udemy. Credit at the bottom and links btw.

<sub>Note: The code is based off someone else's ideas, all the comments and doc are mine as this is supposed to be a teaching kind of post, and even though the main concept is not mine, all the code has been tweaked and modified to align with my own ideas.</sub>

## <center>Double Scrolling Gallery</center>

I am going to build a double vertical slider, so one side goes up, the other goes down, but both sides always make sense. It won't be responsive to the size of the window - this makes it specifically for desktop windows and not for smartphone versions of the website - but still, it is pretty cool.

### HTML Code

````
  <body>
    <div class="slider-container">
````
The first slide text matches the last image on the right side, so just make sure you add the text on the last spot of the left side, and on the first spot of the right side.

      <div class="left-slide">
        <div style="background-color: rgb(20, 106, 36)">
          <h1>Xcambo Ruins</h1>
          <p>The Celestial Crocodile archaeological site in Merida, Mexico</p>
        </div>
        <div style="background-color: rgb(121, 131, 15)">
          <h1>HiveFest Crew</h1>
          <p>
            A bunch of Hivers in Krakow, Poland enjoying what is probably the
            best HiveFest so far, the third edition
          </p>
        </div>
        <div style="background-color: rgb(52, 68, 175)">
          <h1>Street Art</h1>
          <p>
            One of the topics that appears the most in Anomadsoul's blog posts:
            Street art from around the world.
          </p>
        </div>
        <div style="background-color: rgb(116, 21, 145)">
          <h1>JavaScript Learning</h1>
          <p>
            The most common topic among those that Anomadsoul writes on Hive
          </p>
        </div>
      </div>
      <div class="right-slide">
        <div
          style="
            background-image: url('https://images.ecency.com/p/PB8ro82ZpZP35bVGjGoE93K3E4U5KX8KtMBJ2rhsbxYNExo6WDoguJobbdi6R4HbuVVSdnwwCTq5xFNdNvhQuxEhUEA61YyCfrYL47mCCAsqwh6v.webp?format=webp&mode=fit');
          "
        ></div>

        <div
          style="
            background-image: url('https://images.ecency.com/p/3jpR3paJ37V8XPrHkfZdMt57jY6pRt6zEt5iRJV9pRsB6uTUkGiX46yrvJyiaDZ2fKujXnnpHQRvb4X6rkV1HxpQeuKdTMwrvriyD7Liq1yPzfvsqoh6j3k9j3ujMbURY7nBp.webp?format=webp&mode=fit');
          "
        ></div>

        <div
          style="
            background-image: url('https://images.ecency.com/p/2gsjgna1uruvGBHDnRaj2z6FsL6XEQR3pnqa26GnVHqkZrMb8EnBRrsZod1uVJCy4SyKW6MQn32X83M12qTiXPtVCxhhmGr1wssVfny1R6JirafTwc.webp?format=webp&mode=fit');
          "
        ></div>

        <div
          style="
            background-image: url('https://images.ecency.com/p/3W72119s5BjW4PvRk9nXBzqrPWMsMTjNrXDPFFf11w2dDHirp2QwyCuM5Hoxp2bHDnAqBrTezagkqPoyywGG9ZHsLNLqt4JPr6SdnHPTxmnzMfjA271RSW.webp?format=webp&mode=fit');
          "
        ></div>
      </div>
      <div class="action-buttons">
        <button class="down-button">
          <i class="fas fa-arrow-down"></i>
        </button>
        <button class="up-button">
          <i class="fas fa-arrow-up"></i>
        </button>
      </div>
    </div>

    <script src="script.js"></script>
  </body>
</html>
````

So far, it is getting some shape, not even close to ready but at least you can see where I want to get.

![image.png](https://images.ecency.com/DQmS4Wa6VJKrkWukoC69YGLEgUZEuhYQnaAQMFRJsmrvNRc/image.png)

### CSS Code


````
* {
  box-sizing: border-box;
  margin: 0;
  padding: 0;
}

body {
  font-family: "Open Sans", sans-serif;
  height: 100vh;
}
````

I position the slider container as relative because everything inside this container will be positioned absolute.

````
.slider-container {
  position: relative;
  overflow: hidden;
  width: 100vw;
  height: 100vh;
}

.left-slide {
  height: 100%;
  width: 30%;
  position: absolute;
  top: 0;
  left: 0;
}

````

I want to target the immediate *div* on the *left-slide* so:

````
.left-slide > div {
  height: 100%;
  width: 100%;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  color: #fff;
}
````

Above I specified a height and a width, this means that the immediate *div* will take up 100% of the total height, but also the 100% of the 30% of the total width.

````
.left-slide h1 {
  font-size: 40px;
  margin-bottom: 10px;
  /* Adding this negative margin pulls the text up */
  margin-top: -50px;
}

.left-slide p {
  font-size: 16px;
  margin-left: 20px;
  margin-top: 100px;
  margin-bottom: -100px;
  transition: transform 0.5s ease-in-out;
}

.right-slide {
  height: 100%;
  position: absolute;
  top: 0;
  left: 30%;
  width: 70%;
  transition: transform 0.5s ease-in-out;
}

.right-slide > div {
  background-repeat: no-repeat;
  /* I want to show the whole image: */
  background-size: cover;
  /* First center is the X and second is the Y axis */
  background-position: center center;
  height: 100%;
  width: 100%;
}
````

This is not how I intend the images to show, if you check the HTML code you'll see that I arranged them in a counter order, but I will fix that on the JS code.

![image.png](https://images.ecency.com/DQmNYGt8xcZjKi8K3NoWkrTj6ktuRbsqYdJRgW7nW1C7ARM/image.png)

````
button {
  background-color: #fff;
  border: none;
  color: #aaa;
  cursor: pointer;
  font-size: 16px;
  padding: 15px;
}

button:hover {
  color: #222;
}

button:focus {
  outline: none;
}

.slider-container .action-buttons button {
  position: absolute;
  left: 30%;
  top: 50%;
  /* I make sure they are always on top */
  z-index: 100;
}
````
I want to move the down button to the left. Using 100% moves an element over the X axis to the right a distance equal to its size. Using a negative percentage moves it to the left.

````
.slider-container .action-buttons .down-button {
  transform: translateX(-100%);
  /* This will turn circular the left corners of the button: */
  border-top-left-radius: 5px;
  border-bottom-left-radius: 5px;
}

.slider-container .action-buttons .up-button {
  /* I want to move up the *up* button. I use the Y axis but the principle is the same as the one I used above. */
  transform: translateY(-100%);
  /* This will turn circular the left corners of the button: */
  border-top-right-radius: 5px;
  border-bottom-right-radius: 5px;
}

````

Now you can actually see what I want to accomplish, and all I need is a little bit of JS to do so.

![gif1.gif](https://images.ecency.com/DQmfPjHLRLAQzKR7HxL4xfVnLhkrVVNNKR7fbY7Ag8pxZsY/gif1.gif)

### JavaScript Code

````
const sliderContainer = document.querySelector(".slider-container");
const slideRight = document.querySelector(".right-slide");
const slideLeft = document.querySelector(".left-slide");
const upButton = document.querySelector(".up-button");
const downButton = document.querySelector(".down-button");
const slidesLength = slideRight.querySelectorAll("div").length;
````

I want an active slide index, so we need to know which index is in view.

````
let activeSlideIndex = 0;
````

I set it to 0 now, but we'll modifiy it later on this code

````
slideLeft.style.top = `-${(slidesLength - 1) * 100}vh `;
````

I do it negative because the slides are going to go up

Remember that node lists behave like arrays, that's why we use the *length - 1* to get the last slide.

````
upButton.addEventListener("click", () => changeSlide("up"));
downButton.addEventListener("click", () => changeSlide("down"));

const changeSlide = (direction) => {
  const sliderHeight = sliderContainer.clientHeight;
  if (direction === "up") {
    activeSlideIndex++;
    if (activeSlideIndex > slidesLength - 1) {
      activeSlideIndex = 0;
    }
  } else if (direction === "down") {
    activeSlideIndex--;
    if (activeSlideIndex < 0) {
      activeSlideIndex = slidesLength - 1;
    }
  }

  slideRight.style.transform = `translateY(-${
    activeSlideIndex * sliderHeight
  }px`;

  slideLeft.style.transform = `translateY(${activeSlideIndex * sliderHeight}px`;
};
````
![gif2.gif](https://images.ecency.com/DQmdv8qVEQXsnKfuFwVgDAPcHxUHrHBTPepgXuoLDNDPNKv/gif2.gif)

And voila, if you check the 10 second GIF, you'll see the mission has been accomplished!!


















***
***
***
<sub>These projects are based on a CSS, HTML and JS paid course I got on Udemy by [Brad Traversy](https://www.udemy.com/course/50-projects-50-days/learn/lecture/23595546#content). I made my own changes and tweaks but the template so to speak, is his idea and I do not claim them to be my own. If you are looking to practice CSS and JavaScript, his courses are the way to go, check them out on Udemy.</sub>
👍  , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , , and 130 others
properties (23)
authoranomadsoul
permlinkscroll-up-or-down-this
categoryhive-169321
json_metadata{"links":["https://www.udemy.com/course/50-projects-50-days/learn/lecture/23595546#content"],"image":["https://images.ecency.com/DQmS4Wa6VJKrkWukoC69YGLEgUZEuhYQnaAQMFRJsmrvNRc/image.png","https://images.ecency.com/p/PB8ro82ZpZP35bVGjGoE93K3E4U5KX8KtMBJ2rhsbxYNExo6WDoguJobbdi6R4HbuVVSdnwwCTq5xFNdNvhQuxEhUEA61YyCfrYL47mCCAsqwh6v.webp?format=webp&mode=fit","https://images.ecency.com/p/3jpR3paJ37V8XPrHkfZdMt57jY6pRt6zEt5iRJV9pRsB6uTUkGiX46yrvJyiaDZ2fKujXnnpHQRvb4X6rkV1HxpQeuKdTMwrvriyD7Liq1yPzfvsqoh6j3k9j3ujMbURY7nBp.webp?format=webp&mode=fit","https://images.ecency.com/p/2gsjgna1uruvGBHDnRaj2z6FsL6XEQR3pnqa26GnVHqkZrMb8EnBRrsZod1uVJCy4SyKW6MQn32X83M12qTiXPtVCxhhmGr1wssVfny1R6JirafTwc.webp?format=webp&mode=fit","https://images.ecency.com/p/3W72119s5BjW4PvRk9nXBzqrPWMsMTjNrXDPFFf11w2dDHirp2QwyCuM5Hoxp2bHDnAqBrTezagkqPoyywGG9ZHsLNLqt4JPr6SdnHPTxmnzMfjA271RSW.webp?format=webp&mode=fit","https://images.ecency.com/DQmNYGt8xcZjKi8K3NoWkrTj6ktuRbsqYdJRgW7nW1C7ARM/image.png","https://images.ecency.com/DQmfPjHLRLAQzKR7HxL4xfVnLhkrVVNNKR7fbY7Ag8pxZsY/gif1.gif","https://images.ecency.com/DQmdv8qVEQXsnKfuFwVgDAPcHxUHrHBTPepgXuoLDNDPNKv/gif2.gif"],"thumbnails":["https://images.ecency.com/p/PB8ro82ZpZP35bVGjGoE93K3E4U5KX8KtMBJ2rhsbxYNExo6WDoguJobbdi6R4HbuVVSdnwwCTq5xFNdNvhQuxEhUEA61YyCfrYL47mCCAsqwh6v.webp?format=webp&mode=fit","https://images.ecency.com/p/3jpR3paJ37V8XPrHkfZdMt57jY6pRt6zEt5iRJV9pRsB6uTUkGiX46yrvJyiaDZ2fKujXnnpHQRvb4X6rkV1HxpQeuKdTMwrvriyD7Liq1yPzfvsqoh6j3k9j3ujMbURY7nBp.webp?format=webp&mode=fit","https://images.ecency.com/p/2gsjgna1uruvGBHDnRaj2z6FsL6XEQR3pnqa26GnVHqkZrMb8EnBRrsZod1uVJCy4SyKW6MQn32X83M12qTiXPtVCxhhmGr1wssVfny1R6JirafTwc.webp?format=webp&mode=fit","https://images.ecency.com/p/3W72119s5BjW4PvRk9nXBzqrPWMsMTjNrXDPFFf11w2dDHirp2QwyCuM5Hoxp2bHDnAqBrTezagkqPoyywGG9ZHsLNLqt4JPr6SdnHPTxmnzMfjA271RSW.webp?format=webp&mode=fit","https://images.ecency.com/DQmS4Wa6VJKrkWukoC69YGLEgUZEuhYQnaAQMFRJsmrvNRc/image.png","https://images.ecency.com/DQmNYGt8xcZjKi8K3NoWkrTj6ktuRbsqYdJRgW7nW1C7ARM/image.png","https://images.ecency.com/DQmfPjHLRLAQzKR7HxL4xfVnLhkrVVNNKR7fbY7Ag8pxZsY/gif1.gif","https://images.ecency.com/DQmdv8qVEQXsnKfuFwVgDAPcHxUHrHBTPepgXuoLDNDPNKv/gif2.gif"],"tags":["hive-169321","html","css","javascript","coding","developing","developer","hivedevs","pob","vyb"],"app":"ecency/3.0.20-vision","format":"markdown+html"}
created2022-01-26 07:02:54
last_update2022-01-26 09:47:48
depth0
children9
last_payout2022-02-02 07:02:54
cashout_time1969-12-31 23:59:59
total_payout_value20.009 HBD
curator_payout_value19.923 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length10,003
author_reputation1,681,171,138,068,684
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id109,861,398
net_rshares32,590,481,643,249
author_curate_reward""
vote details (194)
@ecency · 
**Yay!** 🤗<br>Your content has been **boosted with Ecency Points**, by @anomadsoul. <br>Use Ecency daily to boost your growth on platform! <br><br><b>Support Ecency</b><br>[Vote for new Proposal](https://hivesigner.com/sign/update-proposal-votes?proposal_ids=%5B197%5D&approve=true)<br>[Delegate HP and earn more](https://ecency.com/hive-125125/@ecency/daily-100-curation-rewards)
👍  
properties (23)
authorecency
permlinkre-2022127t65354459z
categoryhive-169321
json_metadata{"tags":["ecency"],"app":"ecency/3.0.16-welcome","format":"markdown+html"}
created2022-01-27 06:53:54
last_update2022-01-27 06:53:54
depth1
children0
last_payout2022-02-03 06:53:54
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length380
author_reputation613,589,286,978,643
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id109,889,402
net_rshares0
author_curate_reward""
vote details (1)
@gabrielatigger · 
La práctica hace al maestro! Mientras seas disciplinado y persistas, pronto lo lograrás como todo un experto!
properties (22)
authorgabrielatigger
permlinkr6lj66
categoryhive-169321
json_metadata{"app":"hiveblog/0.1"}
created2022-01-31 22:44:30
last_update2022-01-31 22:44:30
depth1
children1
last_payout2022-02-07 22:44:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length109
author_reputation7,284,128,978,813
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id110,026,974
net_rshares0
@anomadsoul · 
Muchas gracias Gaby! Esperemos que la practica de frutos pronto!
👍  
properties (23)
authoranomadsoul
permlinkre-gabrielatigger-202222t20155634z
categoryhive-169321
json_metadata{"tags":["ecency"],"app":"ecency/3.0.21-vision","format":"markdown+html"}
created2022-02-03 02:15:06
last_update2022-02-03 02:15:06
depth2
children0
last_payout2022-02-10 02:15:06
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length64
author_reputation1,681,171,138,068,684
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id110,093,194
net_rshares0
author_curate_reward""
vote details (1)
@jaysensordum · 
All of a sudden I now find codding attractive again after reading this post months without opening a code editor on my PC. I have to rediscover the love I once have for it. 
Thanks for this post.
properties (22)
authorjaysensordum
permlinkre-anomadsoul-2022129t191846462z
categoryhive-169321
json_metadata{"tags":["hive-169321","html","css","javascript","coding","developing","developer","hivedevs","pob","vyb"],"app":"ecency/3.0.20-vision","format":"markdown+html"}
created2022-01-29 18:18:48
last_update2022-01-29 18:18:48
depth1
children1
last_payout2022-02-05 18:18:48
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length195
author_reputation484,533,719,983
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id109,960,285
net_rshares0
@anomadsoul · 
Oh damn, hopefully you get back to it man! What were you writing before you stopped months ago?
properties (22)
authoranomadsoul
permlinkre-jaysensordum-202222t201529343z
categoryhive-169321
json_metadata{"tags":["hive-169321","html","css","javascript","coding","developing","developer","hivedevs","pob","vyb"],"app":"ecency/3.0.21-vision","format":"markdown+html"}
created2022-02-03 02:15:30
last_update2022-02-03 02:15:30
depth2
children0
last_payout2022-02-10 02:15:30
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length95
author_reputation1,681,171,138,068,684
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id110,093,202
net_rshares0
@mcsamm ·
$0.07
You have simply raised my interest in going back to coding seriously. Thanks for this motivation sir.
👍  ,
properties (23)
authormcsamm
permlinkr6b9si
categoryhive-169321
json_metadata{"app":"hiveblog/0.1"}
created2022-01-26 09:45:57
last_update2022-01-26 09:45:57
depth1
children1
last_payout2022-02-02 09:45:57
cashout_time1969-12-31 23:59:59
total_payout_value0.034 HBD
curator_payout_value0.033 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length101
author_reputation1,528,820,879,478,063
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id109,864,412
net_rshares55,204,736,297
author_curate_reward""
vote details (2)
@anomadsoul · 
That's great man! What language do you write in? Perhaps you can post about programming, we definitely need a more active coder scene on Hive.
👍  
properties (23)
authoranomadsoul
permlinkre-mcsamm-2022126t11844516z
categoryhive-169321
json_metadata{"tags":["ecency"],"app":"ecency/3.0.20-vision","format":"markdown+html"}
created2022-01-26 17:08:45
last_update2022-01-26 17:08:45
depth2
children0
last_payout2022-02-02 17:08:45
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length143
author_reputation1,681,171,138,068,684
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id109,873,314
net_rshares0
author_curate_reward""
vote details (1)
@michelmake · 
Looking very slick! Nice work 💪
properties (22)
authormichelmake
permlinkre-anomadsoul-2022126t8211345z
categoryhive-169321
json_metadata{"tags":["hive-169321","html","css","javascript","coding","developing","developer","hivedevs","pob","vyb"],"app":"ecency/3.0.25-mobile","format":"markdown+html"}
created2022-01-26 07:21:12
last_update2022-01-26 07:21:12
depth1
children1
last_payout2022-02-02 07:21:12
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length31
author_reputation38,156,784,734,657
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id109,861,657
net_rshares0
@anomadsoul · 
Thanks amigo! Doing my best
properties (22)
authoranomadsoul
permlinkre-michelmake-2022126t11851512z
categoryhive-169321
json_metadata{"tags":["hive-169321","html","css","javascript","coding","developing","developer","hivedevs","pob","vyb"],"app":"ecency/3.0.20-vision","format":"markdown+html"}
created2022-01-26 17:08:51
last_update2022-01-26 17:08:51
depth2
children0
last_payout2022-02-02 17:08:51
cashout_time1969-12-31 23:59:59
total_payout_value0.000 HBD
curator_payout_value0.000 HBD
pending_payout_value0.000 HBD
promoted0.000 HBD
body_length27
author_reputation1,681,171,138,068,684
root_title"Scroll up or down, this gallery works both ways"
beneficiaries[]
max_accepted_payout1,000,000.000 HBD
percent_hbd10,000
post_id109,873,317
net_rshares0
Help/Feedback