Mouse autoscroll to anchor

25.04.2019 23:14

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

Co se právě děje na Webtrhu?

Eliaš - IT Solutions poptává: Java developer frankfurt
Tomas mora poptává: Woocommerce úprava ceny produktu A + B (sleva)
Colorfuldesign.cz nabízí: 💡Tvorba webů a e-shopů na míru | Kvalita na 1. místě 💡

25.04.2019 23:30

(6 hodnocení)

2

25.04.2019 23:30

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

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

Původně odeslal PetrGargulák ↪

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

Tohle ti chybí....

https://cdnjs.cloudflare.com/ajax/li...sewheel.min.js
https://code.jquery.com/jquery-1.11.2.min.js

26.04.2019 00:23

(3 hodnocení)

3

26.04.2019 00:23

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.04.2019 00:30

(15 hodnocení)

4

26.04.2019 00:30

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)

Kód:

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

<head>
    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
    <title>Form site</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" href="styl.css">
</head>
<body>

<div id="fullpage">
    <div id="section0" class="section1">

        <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 id="section1" class="section2">

        <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>

<script type="text/javascript" src="fullpage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
    var myFullpage = new fullpage('#fullpage', {
        css3: false
    });
</script>

</body>
</html>

ICH KOD (FUNKCNE)

Kód:

<!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>


<script type="text/javascript" src="../dist/fullpage.js"></script>
<script type="text/javascript" src="examples.js"></script>
<script type="text/javascript">
    var myFullpage = new fullpage('#fullpage', {
        sectionsColor: ['#1bbc9b', '#4BBFC3', '#7BAABE'],
        css3: false
    });
</script>

</body>
</html>

Navyše keď tam pridám

Kód:

    <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />

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...[COLOR="Silver"]

26.04.2019 18:41

(0 hodnocení)

5

26.04.2019 18:41

To je vážne zaujímavé

26.04.2019 21:12

(3 hodnocení)

6

26.04.2019 21:12

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.04.2019 22:09

(15 hodnocení)

7

26.04.2019 22:09

Původně odeslal Miroslav Foltýn ↪

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.04.2019 22:23

(3 hodnocení)

8

26.04.2019 22:23

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

26.04.2019 22:28

(15 hodnocení)

9

26.04.2019 22:28

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 :)

Web	matustrgina.webflow.io
Příspěvky	1 626
Členem od	11.01.2010

Web	petrgargulak.cz
Příspěvky	500
Členem od	26.01.2017

Web	github.com
Příspěvky	126
Členem od	06.08.2014

Web	matustrgina.webflow.io
Příspěvky	1 626
Členem od	11.01.2010

Web	github.com
Příspěvky	126
Členem od	06.08.2014