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ý.
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...
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>
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"]
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
Naposledy upravil Miroslav Foltýn : 26.04.2019 v 22:53
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...
Původně odeslal PetrGargulák
