• Najnowsze pytania
  • Bez odpowiedzi
  • Zadaj pytanie
  • Kategorie
  • Tagi
  • Zdobyte punkty
  • Ekipa ninja
  • IRC
  • FAQ
  • Regulamin
  • Książki warte uwagi

Zmiana opacity podczas scrollowania

VPS Starter Arubacloud
+1 głos
179 wizyt
pytanie zadane 17 listopada 2020 w HTML i CSS przez K4P3K Początkujący (360 p.)
Jak ustawić kod, aby podczas przewijania opacity wynosiło "0.3" a gdy nie scrollujemy jego wartość była równa 1?

 

https://codepen.io/K4P3K/pen/GRqLrzw

3 odpowiedzi

0 głosów
odpowiedź 20 listopada 2020 przez VBService Ekspert (251,210 p.)
wybrane 22 listopada 2020 przez K4P3K
 
Najlepsza

Mini sandbox ... do testowania smiley Codepen

<img src="https://source.unsplash.com/300x202">
<div class="lorem-container"></div>
img {
  position: fixed;
  top: 0;
  left: 50vw;
  transform: translateX(-50%);
  opacity: 1;
  transition: all 1.2s;
  border-radius: 1em;
}
p {
  font: 1.2em arial;
  text-indent: 1em;
  text-align: justify;
}
p:first-letter {
  font-size: 1.5em;
  text-transform: uppercase;    
}
const min_range = 10;
const max_range = 30;
let is_scroll = false;
const lorem_arr = ['<mark>lorem</mark> ipsum dolor sit amet',
                   'consectetur adipiscing elit',
                   'duis eget elit in turpis vestibulum',
                   'aenean bibendum malesuada lacus',
                   'faucibus tincidunt metus',
                   'suspendisse consectetur pulvinar est sed consequat',
                   'duis sagittis nec ipsum et facilisis',
                   'morbi sodales sollicitudin mauris'];
const lorem_arr_length = lorem_arr.length - 1;

window.onload = () => {
  const img = document.querySelector('img');
  const lorem = document.querySelector('.lorem-container');
  
  let lorem_phrase = '';
  let lorem_html = '';
  const range = random(min_range, max_range);
  
  for (let i = 0; i <= range; ++i) {
    let sentences = random(0, max_range);
    for (let j = 0; j <= sentences; ++j) {
      lorem_phrase += lorem_arr[random(0, lorem_arr_length)] + ' ';
    }
    lorem_html += `<p>${lorem_phrase.trim()}.</p>`;
    lorem_phrase = '';
  }
  lorem.innerHTML = lorem_html;
  
  setInterval(() => {
    console.clear();
    if (is_scroll) {
      is_scroll = false;
      console.log('scrolling ...');
      img.setAttribute('style', 'opacity: 0.09');
    } else {
      img.setAttribute('style', 'opacity: 1');
    }
  }, 250);
}

window.onscroll = () => is_scroll = true;
let random = (min, max) => { return Math.floor(Math.random() * (max - min + 1)) + min; }

 

+2 głosów
odpowiedź 18 listopada 2020 przez niezalogowany

https://www.youtube.com/watch?v=3PHXvlpOkf4&t=29088s

3:32:45 początek zagadnienia zw z Twoim pytaniem! Myślę że 75% pracy już masz cool zrobione.

Polecam wink Miłego i owocnego dnia!

komentarz 18 listopada 2020 przez K4P3K Początkujący (360 p.)
Dziękuję <3
+1 głos
odpowiedź 18 listopada 2020 przez wizarddos Nałogowiec (25,130 p.)
window.onscroll = function (e) {  
// called when the window is scrolled.  
} 

wystarczy użyć zdarzenia scroll a w tej funkcji zmieniać atrybuty css.(rozwiązanie ze stack overflow całość tu)

1
komentarz 18 listopada 2020 przez K4P3K Początkujący (360 p.)
Dziękuję <3

Podobne pytania

0 głosów
1 odpowiedź 162 wizyt
pytanie zadane 30 listopada 2019 w HTML i CSS przez Teslum_369 Gaduła (4,190 p.)
0 głosów
1 odpowiedź 286 wizyt
pytanie zadane 14 września 2019 w HTML i CSS przez CyprianKoruba Początkujący (290 p.)
0 głosów
2 odpowiedzi 195 wizyt
pytanie zadane 17 lutego 2018 w HTML i CSS przez PROFF Obywatel (1,180 p.)

92,454 zapytań

141,262 odpowiedzi

319,095 komentarzy

61,854 pasjonatów

Motyw:

Akcja Pajacyk

Pajacyk od wielu lat dożywia dzieci. Pomóż klikając w zielony brzuszek na stronie. Dziękujemy! ♡

Oto polecana książka warta uwagi.
Pełną listę książek znajdziesz tutaj.

Akademia Sekuraka

Akademia Sekuraka 2024 zapewnia dostęp do minimum 15 szkoleń online z bezpieczeństwa IT oraz dostęp także do materiałów z edycji Sekurak Academy z roku 2023!

Przy zakupie możecie skorzystać z kodu: pasja-akademia - użyjcie go w koszyku, a uzyskacie rabat -30% na bilety w wersji "Standard"! Więcej informacji na temat akademii 2024 znajdziecie tutaj. Dziękujemy ekipie Sekuraka za taką fajną zniżkę dla wszystkich Pasjonatów!

Akademia Sekuraka

Niedawno wystartował dodruk tej świetnej, rozchwytywanej książki (około 940 stron). Mamy dla Was kod: pasja (wpiszcie go w koszyku), dzięki któremu otrzymujemy 10% zniżki - dziękujemy zaprzyjaźnionej ekipie Sekuraka za taki bonus dla Pasjonatów! Książka to pierwszy tom z serii o ITsec, który łagodnie wprowadzi w świat bezpieczeństwa IT każdą osobę - warto, polecamy!

...