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

dodanie scrolla do diva

VPS Starter Arubacloud
0 głosów
142 wizyt
pytanie zadane 22 stycznia 2018 w HTML i CSS przez Hardwell Dyskutant (8,960 p.)

 

Witam, pomoże ktoś osadzić tego scrolla: http://www6.zippyshare.com/v/gQO2coMv/file.html

Do mojej strony? A mianowicie do diva o nazwie menu

Podaję kod:

 <link rel="stylesheet" type="text/css" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/4.3.0/css/font-awesome.css">
 <link rel="stylesheet" type="text/css" href="style/style.css">
<div class="ct" id="t1">
  <div class="ct" id="t2">
    <div class="ct" id="t3">
      <div class="ct" id="t4">
         <div class="ct" id="t5">
          <ul id="menu" >
            <a href="#t1"><li class="icon fa fa-home" id="jeden"></li></a>
            <a href="#t2"><li class="icon fa fa-keyboard-o" id="dwa"></li></a>
            <a href="#t3"><li class="icon fa fa-rocket" id="trzy"></li></a>
            <a href="#t4"><li class="icon fa fa-dribbble" id="cztery"></li></a>
            <a href="#t5"><li class="icon fa fa-plus-circle" id="piec"></li></a>
		    <a href="#t6"><li class="icon fa fa-plus-circle" id="szesc"></li></a>
			<a href="#t7"><li class="icon fa fa-plus-circle" id="siedem"></li></a>
			<a href="#t8"><li class="icon fa fa-plus-circle" id="osiem"></li></a>
		    <a href="#t9"><li class="icon fa fa-plus-circle" id="dziewiec"></li></a>
	        <a href="#t10"><li class="icon fa fa-plus-circle" id="dziewiec"></li></a>								
			<a href="#t11"><li class="icon fa fa-plus-circle" id="dziewiec"></li></a>
		    <a href="#t12"><li class="icon fa fa-plus-circle" id="dziewiec"></li></a>
		    <a href="#t13"><li class="icon fa fa-plus-circle" id="dziewiec"></li></a>
		    <a href="#t14"><li class="icon fa fa-plus-circle" id="dziewiec"></li></a>
		    <a href="#t15"><li class="icon fa fa-plus-circle" id="dziewiec"></li></a>			
          </ul>
          <div class="page" id="p1" >
             <section class="icon fa fa-bolt"><span class="title">Bolt</span><span class="hint">Like this pen to see the magic!...<br> Just kidding, it won't happen anything but I'll be really happy If you do so.</span></section>  
          </div>
          <div class="page" id="p2">
            <section class="icon fa fa-keyboard-o"><span class="title">Type</span></section>
          </div>  
          <div class="page" id="p3">
            <section class="icon fa fa-rocket"><span class="title">Rocket</span></section>
          </div>
          <div class="page" id="p4">
            <section class="icon fa fa-dribbble">
              <span class="title">Dribbble</span>
              <p class="hint">
              </p>
              </section>
          </div> 
          <div class="page" id="p5">
            <section class="icon fa fa-plus-circle">
              <span class="title">More</span>
              <p class="hint">
                <span>You love one page & CSS only stuff? </span><br/>
                 </p>
            </section>
          </div> 
        </div>
      </div>
    </div>
  </div>
</div>


html, body, .page {
  width: 100%;
  height: 100%;
  margin: 0;
  padding: 0;
  transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
  -moz-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);
  -o-transition: all .6s cubic-bezier(.5, .2, .2, 1.1);  
  color: #fff;
  overflow: hidden; 
}

* {
  font-family: 'open sans', 'lato', 'helvetica', sans-serif;
}

.page {
  position: absolute;
}

#p1 {
  left: 0;
}

#p2, #p3, #p4, #p5 {
  left: 200%;
}

#p1 { background: darkslateblue; }
#p2 { background: tomato; }
#p3 { background: gold; }
#p4 { background: deeppink; }
#p5 { background: rebeccapurple; }

#t2:target #p2,
#t3:target #p3,
#t4:target #p4,
#t5:target #p5 {
  transform: translateX(-190%);
  -moz-transform: translateX(-190%);
  -o-transform: translateX(-190%);
  transition-delay: .4s !important;
}

#t2:target #p1, 
#t3:target #p1,
#t4:target #p1,
#t5:target #p1{
  background: black;
}

#t2:target #p1 .icon, 
#t3:target #p1 .icon,
#t4:target #p1 .icon,
#t5:target #p1 .icon {
  -webkit-filter: blur(3px);
}

.icon {
  color: #fff;
  font-size: 32px;
  display: block;
}

ul .icon:hover {
  opacity: 0.5;
}

.page .icon .title {
  line-height: 2;
}

#t2:target ul .icon,
#t3:target ul .icon,
#t4:target ul .icon,
#t5:target ul .icon{
  -moz-transform: scale(.6);
  -o-transform: scale(.6);
  transition-delay: .25s;
}

#t2:target #dwa,
#t3:target #trzy,
#t4:target #cztery,
#t4:target #piec {
  transform: scale(1.9) !important;
  -moz-transform: scale(1.9) !important;
  -o-transform: scale(1.9) !important;
}

ul {
  position: fixed;
  z-index: 1;
  top: 0;
  bottom: 0;
  left: 0;
  margin: 0;
  height: 100%;
  width: 10%;
  padding: 0;
  text-align: center;

}

#menu .icon {
  margin: 30px 0;
  transition: all .5s ease-out !important;
  -moz-transition: all .5s ease-out;
  -o-transition: all .5s ease-out;
}

a {
  text-decoration: none;
}

.title, .hint {
  display: block;
}

.title {
  font-size: 38px;
}

.hint {
  font-size: 13px;
}

#p4 .hint {
  display: inherit !important;
}

.hint a {
  color: yellow;
  transition: all 250ms ease-out;
  -moz-transition: all 250ms ease-out;
  -o-transition: all 250ms ease-out;
}

.hint a:hover {
  color: #FFF;
}

.line-trough {
  text-decoration: line-through;
}

.page .icon {
  position: absolute;
  top: 0;
  bottom: 0;
  right: 10%;
  left: 0;
  width: 270px;
  height: 170px;
  margin: auto;
  text-align: center;
  font-size: 80px;
  line-height: 1.3;
  transform: translateX(360%);
  -moz-transform: translateX(360%);
  -o-transform: translateX(360%);
  transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -moz-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
  -o-transition: all .5s cubic-bezier(.25, 1, .5, 1.25);
}

.page#p1 .icon {
  height: 220px;
}

.page#p1 .icon {
  transform: translateX(10%) !important;
}

#t2:target .page#p2 .icon,
#t3:target .page#p3 .icon,
#t4:target .page#p4 .icon,
#t5:target .page#p5 .icon {
  transform: translateX(0) !important;
  -moz-transform: translateX(0) !important;
  -o-transform: translateX(0) !important;
  transition-delay: 1s;
}


.scrollgeneric {
line-height: 1px;
font-size: 1px;
position: absolute;
top: 0; left: 0;
}

.vscrollerbase {
width: 10px;
background-color: white;
}
.vscrollerbar {
width: 10px;
background-color: black;
}
.hscrollerbase {
height: 10px;
background-color: white;
}
.hscrollerbar {
height: 10px;
background-color: blue;
}

.scrollerjogbox {
width: 10px;
height: 10px;
top: auto; left: auto;
bottom: 0px; right: 0px;
background-color: gray;
}

 

komentarz 23 stycznia 2018 przez pablop76 VIP (123,060 p.)
Jaki scroll. Doprecyzyj. Nie zciągam takich paczek.
komentarz 23 stycznia 2018 przez Hardwell Dyskutant (8,960 p.)
W tej paczce jest plik .js css i html, dla tego wsadziłem to do paczki, myślałem że będzie łatwiej jak chcesz to wstawię tu kod bezpośrednio

1 odpowiedź

+1 głos
odpowiedź 23 stycznia 2018 przez pablop76 VIP (123,060 p.)
wybrane 23 stycznia 2018 przez Hardwell
 
Najlepsza
Otwórz stronę z tej paczki kliknij ppm i kliknij "pokaż źródło strony" lub "wyświetl źródło strony". Wszystko stanie się jasne :)
komentarz 23 stycznia 2018 przez pablop76 VIP (123,060 p.)

Zobacz nicescroll plugin. Nowoczesna wtyczka z mnóstwem opcji konfiguracji.

Podobne pytania

0 głosów
1 odpowiedź 234 wizyt
pytanie zadane 24 sierpnia 2018 w HTML i CSS przez YakumoPL Obywatel (1,970 p.)
0 głosów
2 odpowiedzi 439 wizyt
pytanie zadane 21 października 2018 w HTML i CSS przez DinapeS Początkujący (350 p.)
0 głosów
1 odpowiedź 866 wizyt
pytanie zadane 22 lipca 2017 w HTML i CSS przez Vorex444 Dyskutant (9,610 p.)

92,455 zapytań

141,263 odpowiedzi

319,099 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!

...