Mouse autoscroll to anchor

matusy

(14 hodnocení)

25. 4. 2019 23:14:25

Zdravíčko,

snažím sa prísť na to, prečo mi to nebeží tak ako na príklade uvedenom tu:

Attention Required! | Cloudflare

U mňa to vyzerá takto, lenže to nebeží. Nevedel by niekto poradiť kde je chyba?

Attention Required! | Cloudflare

25. 4. 2019 23:14:25

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398716

Petr Gargulák

(12 hodnocení)

25. 4. 2019 23:30:46

zkus zkontrolovat přidané soubory js.....settings javascript....

---------- Příspěvek doplněn 25.04.2019 v 23:33 ----------

Napsal PetrGargulák;1523819
zkus zkontrolovat přidané soubory js.....settings javascript....

Tohle ti chybí....

https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js

https://code.jquery.com/jquery-1.11.2.min.js

25. 4. 2019 23:30:46

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398715

Miroslav Foltyn

(3 hodnocení)

26. 4. 2019 00:23:38

I s importování knihoven (mimochodem archaická verze jQuery a dodatečný plugin na mouse wheel bude již dnes nejspíše zbytečný), tam je spousta chyb. Navíc jenom kvůli těmto drobným operacím je jQuery zbytečné.

1) V HTML jsou sekce rozlišeny pomocí tříd, ovšem v Javascriptu se k nim snažíte uložit reference pomocí selektoru přes ID

2) Při slepém kopírování jste v Javascriptu nechal reference na DOM elementy z prvního příkladu. Tu logiku kolem toho, kam a kdy scrollovat byste měl dodělat.

Navíc, opravdu vám to jako grafikovi připadá přes UX korektní i v tom prvním případě? Když opomenu své opovržení k scroll jackingu, tak je i příklad ze kterého vycházíte velmi špatně implementovaný - všimněte si, jak to odporně při scrollu neplynule skáče, z takového webu bych ihned odešel. Minimálně by pomohlo, kdyby po dobu animace byl ten scroll handler vyplý.

26. 4. 2019 00:23:38

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398714

matusy

(14 hodnocení)

26. 4. 2019 00:24:35

Napsal PetrGargulák;1523819
zkus zkontrolovat přidané soubory js.....settings javascript....
---------- Příspěvek doplněn 25.04.2019 v 23:33 ----------
Tohle ti chybí....
https://cdnjs.cloudflare.com/ajax/libs/jquery-mousewheel/3.1.12/jquery.mousewheel.min.js
https://code.jquery.com/jquery-1.11.2.min.js

Ty si boh :)

Díki moc chlape!

26. 4. 2019 00:24:35

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398713

matusy

(14 hodnocení)

26. 4. 2019 00:30:00

Super chlapi, vďaka moc.. Len sa učím, budem mať ešte hromadu lamáckych otázok, takže veľmi pekne ďakujem za ochotu, fakt si to moc vážim. Každá jedna rada je mi vzácna...

Nevedel som, že sa to volá scroll jacking, každopádne pri niektorých dizajnových weboch je to pecka. Videl som to aj u veľkých hráčov a pokiaľ je to spravené dobre, tak to vyzerá super :) Ale áno, toto vyhotovenie zjavne nieje ideálne. Čeknem iný script.

---------- Příspěvek doplněn 26.04.2019 v 18:21 ----------

Tak nakoniec sa podarilo, ale efekt nebol dobrý, takže som hľadal iný script...

fullPage.js | One Page Scroll sections Site Plugin

Toto vyzerá super a má dosť možností, ale z nejakého dôvodu to nechce šlapať... keď z príkladu vyhodím csska, tak im to stále šlape, takže mám pocit, že je chyba len niekde v mojich IDčkách, lenže žiadnu chybu nevidím...

Vie niekto kde môže byť chyba?

MOJ KOD (NEFUNKCNE)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<div class="row">
            <img class="logo" src="logo.svg">
            <h1>Digital Policy<br>Discussion</h1>
            <h2>I love clean smart design when customer doenst need to think at all</h2>
            <p>Front End Developing
            <br>
            UX, Visual Code Studio, C4D, Animation
            <br>
            Live in Slovak Republic of Congo
            </p>
        </div>
        
        <div class="row two">
            <h3><a href="#section1">Click Here if You Need Me</a></h3>
        </div>

</div>

<div class="row">
            <imgclass="logo" src="logo.svg">
            <h1>Digital Policy<br>Discussion</h1>
            <h2>I love clean smart design when customer doenst need to think at all</h2>
            <p class="blue">Front End Developing
            <br>
            UX, Visual Code Studio, C4D, Animation
            <br>
            Live in Slovak Republic of Congo
            </p>
        </div>
        
        <div class="row two">
            <h3><a href="#section0">Click Here if You Need Me</a></h3>
        </div>

</div>
</div>

</body>
</html>

ICH KOD (FUNKCNE)

<!DOCTYPE html>
<html xmlns="http://www.w3.org/1999/xhtml">

<head>
	<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
	<title>CSS3 - fullPage.js</title>
	<meta name="author" content="Alvaro Trigo Lopez" />
	<meta name="description" content="fullPage.js using CSS3 transformations." />
	<meta name="keywords"  content="fullpage,jquery,anchor,links,inside,demo,css,css3" />
	<meta name="Resource-type" content="Document" />
	<link rel="stylesheet" type="text/css" href="../dist/fullpage.css" />
	<link rel="stylesheet" type="text/css" href="examples.css" />
</head>
<body>

<select id="demosMenu">
  <option selected>Choose Demo</option>
  <option id="jquery-adapter">jQuery adapter</option>
  <option id="active-slide">Active section and slide</option>
  <option id="auto-height">Auto height</option>
  <option id="autoplay-video-and-audio">Autoplay Video and Audio</option>
  <option id="backgrounds">Background images</option>
  <option id="backgrounds-fixed">Fixed fullscreen backgrounds</option>
  <option id="background-video">Background video</option>
  <option id="callbacks-v2-compatible">Callbacks version 2</option>
  <option id="callbacks-v3">Callbacks version 3</option>
  <option id="continuous-horizontal">Continuous horizontal</option>
  <option id="continuous-vertical">Continuous vertical</option>
  <option id="parallax">Parallax</option>
  <option id="css3">CSS3</option>
  <option id="drag-and-move">Drag And Move</option>
  <option id="easing">Easing</option>
  <option id="fading-effect">Fading Effect</option>
  <option id="fixed-headers">Fixed headers</option>
  <option id="gradient-backgrounds">Gradient backgrounds</option>
  <option id="interlocked-slides">Interlocked Slides</option>
  <option id="looping">Looping</option>
  <option id="methods">Methods</option>
  <option id="navigation-vertical">Vertical navigation dots</option>
  <option id="navigation-horizontal">Horizontal navigation dots</option>
  <option id="navigation-tooltips">Navigation tooltips</option>
  <option id="no-anchor">No anchor links</option>
  <option id="normal-scroll">Normal scrolling</option>
  <option id="normalScrollElements">Normal scroll elements</option>
  <option id="offset-sections">Offset sections</option>
  <option id="one-section">One single section</option>
  <option id="reset-sliders">Reset sliders</option>
  <option id="responsive-auto-height">Responsive Auto Height</option>
  <option id="responsive-height">Responsive Height</option>
  <option id="responsive-width">Responsive Width</option>
  <option id="responsive-slides">Responsive Slides</option>
  <option id="scrollBar">Scroll bar enabled</option>
  <option id="scroll-horizontally">Scroll horizontally</option>
  <option id="scrollOverflow">Scroll inside sections and slides</option>
  <option id="scrollOverflow-reset">ScrollOverflow Reset</option>
  <option id="lazy-load">Lazy load</option>
  <option id="scrolling-speed">Scrolling speed</option>
  <option id="trigger-animations">Trigger animations</option>
  <option id="vue-fullpage">Vue-fullpage component</option>
</select>

<div id="fullpage">
	<div class="section " id="section0">
		<h1>fullPage.js</h1>
		<p>CSS3 is active by default</p>
		<img src="imgs/fullPage.png" alt="fullPage" />
	</div>
	<div class="section" id="section1">
		<div class="intro">
			<h1>Speed on mobile</h1>
			<p>
	      If CSS3 transforms are supported (e.g. on mobile devices) they will be used for animations, usually a good
	      choice if the animation on mobile devices is slow.
			</p>
		</div>
	</div>
	<div class="section" id="section2">
		<div class="intro">
			<h1>No CSS3? No problem!</h1>
			<p>If CSS3 is not available, animations will fall back to javascript driven animations.</p>
		</div>
	</div>
</div>

</body>
</html>

Navyše keď tam pridám tak obrazovka zamrzne na prvom "slajde", čiže sa nedá ani scrollnúť dole :/ ... keď to z tade vyhodím, tak scrollnúť ide, lenže script nefunguje...

26. 4. 2019 00:30:00

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398712

niktos

26. 4. 2019 18:41:12

To je vážne zaujímavé

26. 4. 2019 18:41:12

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398711

Miroslav Foltyn

(3 hodnocení)

26. 4. 2019 21:12:31

Je velmi těžké (ne-li nemožné) ve většině příkladech najít chybu, když sem vložíte X kusů kódu, mimo jejich kontext. Navíc, opět jenom kopírujete archaický kód... Když potřebujete s něčím pomoc, co není otázkou nějakého principu, tak by bylo mnohem lepší umístit příklad někde online.

Navíc, opravdu to máte odlišné od jejich kódu. Podívejte se do dokumentace nebo na jimi ukázaný příklad. Použivají jinou konvenci pro označování sekcí, které se mají scrollovat. https://codepen.io/alvarotrigo/pen/NxyPPp

26. 4. 2019 21:12:31

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398710

matusy

(14 hodnocení)

26. 4. 2019 22:09:55

Napsal Miroslav Foltýn;1523954
Je velmi těžké (ne-li nemožné) ve většině příkladech najít chybu, když sem vložíte X kusů kódu, mimo jejich kontext. Navíc, opět jenom kopírujete archaický kód... už samotná doctype definice na začátku již dávno není aktuální a nenapadá mě důvod proč by na tomto konkrétním příkladu měla být. Když potřebujete s něčím pomoc, co není otázkou nějakého principu, tak by bylo mnohem lepší umístit příklad někde online.
Navíc, opravdu to máte odlišné od jejich kódu. Podívejte se do dokumentace nebo na jimi ukázaný příklad. Použivají jinou konvenci pro označování sekcí, které se mají scrollovat. https://codepen.io/alvarotrigo/pen/NxyPPp

Ospravedlňujem sa, s codepen sa tiež eštelen učím pracovať.

Veľmi pekne ďakujem za vysvetlenie, veľkú časť ste mi pomohli objasniť.

Veľká vďaka.

Len mi nejde trocha do hlavy, prečo sú tam napevno dané farby, keď ich chcem mať logicky nastajlované podľa vlastného css...To je už síce len taký detail, ale nechápem to...

26. 4. 2019 22:09:55

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398709

Miroslav Foltyn

(3 hodnocení)

26. 4. 2019 22:23:25

To bude jistě volitelná možnost. Ta knihovna má dokumentaci, určitě to tam najdete.

26. 4. 2019 22:23:25

https://webtrh.cz/diskuse/mouse-autoscroll-to-anchor/#reply1398708

matusy

(14 hodnocení)

26. 4. 2019 22:28:23

jj, akurát to čekujem. Ako píšem, ozrejmil ste mi toho viac ako dosť :) Moc krát vďaka, už sa s tým mordujem dva dni :D ... Máte u mňa pivo :)