Skip to content

Commit

Permalink
Updated navigation
Browse files Browse the repository at this point in the history
  • Loading branch information
@AntonShevchuk
AntonShevchuk committed Apr 5, 2024
1 parent f10337f commit d9d1ff1
Show file tree
Hide file tree
Showing 9 changed files with 268 additions and 271 deletions.
216 changes: 115 additions & 101 deletions animate.easing.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -3,137 +3,151 @@
<head>
<meta charset="UTF-8"/>
<meta name="viewport" content="width=device-width, initial-scale=1.0"/>
<title>Пример анимации с использованием плагина easing</title>
<title>Пример расширения объекта easing</title>
<link rel="profile" href="https://gmpg.org/xfn/11"/>
<link rel="shortcut icon" href="https://anton.shevchuk.name/favicon.ico"/>
<link rel="stylesheet" href="css/styles.css"/>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript" src="js/jquery.easing.js"></script>
<script type="text/javascript">
$(function () {

let $output = $('#output code')
let $select = $('aside select')

for (let x in jQuery.easing) {
if (x !== 'linear' && x !== 'swing' &&
x !== 'jswing' && x !== 'def' && x !== '_default')
$select.append($('<option>').attr('value', x).text(x))
}

$select.change(function () {
$('aside img').attr({
'src': 'images/' + $select.val() + '.png',
'alt': $select.val()
})
})

$('#button').click(function () {

$('.square')
.animate(
{
top: 360,
left: 360
},
{
specialEasing: {
top: $select.val(),
left: "linear"
},
duration: 2000,
done: function () {
$('.square').delay(3).css({ top: 40, left: 40 })
},
step: function (now, fx) {
if (fx.prop === "top") {
$output.text(`top: ${Math.round(now)}`)
}
}
}
)

// alternative based on queue
// $('.square')
// .animate({ top: 360 }, {easing:sel.val(), duration:2000})
// .animate({ left: 360 }, {queue:false, duration:2000, done: function () {
// $('.square').delay(3).css({ top: 40, left: 40 })
// }})
})

})
</script>
<style>
article {
.heart {
width: 200px;
height: 200px;
overflow: hidden;
position: relative;
height: 480px;
}

aside img {
margin: 10px auto;
padding: 4px;
border: 1px solid #999;
border-radius: 4px;
margin: 0 auto 4px;
}

aside select {
width: 214px;
.heart img {
position: absolute;
margin: 50px;
width: 100px;
height: 100px;
border: 0
}

aside #button {
min-width: 50px;
width: 50px;
height: 40px;
.heart p {
position: absolute;
width: 200px;
padding: 0;
text-align: center;
margin-top: 8px;
font-weight: 700;
}

.square {
width: 100px;
.block {
height: 100px;
top: 40px;
left: 40px;
border-radius: 4px;
box-shadow: 0 0 4px 0 rgba(0,0,0,0.75);
background: #ff7300;
position: absolute;
}

.target {
height: 10px;
border-bottom: 2px #fe3456 dotted;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
<script type="text/javascript">
$.extend($.easing, {
/**
* Heart Beat
*
* @param x
* @param t current time
* @param b begining
* @param c change in value
* @param d duration
*
* @link https://habrahabr.ru/blogs/mootools/43379/
*/
heart: function (x) {
if (x < 0.3) return Math.pow(x, 4) * 49.4
if (x < 0.4) return 9 * x - 2.3
if (x < 0.5) return -13 * x + 6.5
if (x < 0.6) return 4 * x - 2
if (x < 0.7) return 0.4
if (x < 0.75) return 4 * x - 2.4
if (x < 0.8) return -4 * x + 3.6
if (x >= 0.8) return 1 - Math.sin(Math.acos(x))
},
heartIn: function (x) {
return x === 0 ? 0 : $.easing.heart(x)
},
heartOut: function (x) {
if (x < 0.3) return $.easing.heartIn(x)
return x === 1 ? 1 : 1 - $.easing.heart(x)
},
heartInOut: function (x) {
if (x < 0.5) return $.easing.heartIn(x)
return $.easing.heartOut(x)
}

})
$(function () {
$('.heart').click(function () {
let easing = $(this).data('easing')
$(this).find('img')
.animate({ width: '-=50px', height: '-=50px', left: '+=25px', top: '+=50px' }, 3000, easing)
.animate({ width: '+=50px', height: '+=50px', left: '-=25px', top: '-=50px' }, 200)

})
})
</script>
</head>
<body>
<header>
<h1>Использование плагина <a href="https://gsgd.co.uk/sandbox/jquery/easing/">easing</a></h1>
<h2>Плагин из разряда &laquo;must have&raquo;</h2>
<h1>Пример расширять объект easing</h1>
<h2>Пробуем, играемся, и мотаем на ус (покликайте по сердцам)</h2>
</header>
<main>
<article>
<div class="square"></div>
<div class="output"></div>
</article>
<article>
<div class="block">
<div class="target"></div>
</div>
<div class="heart" data-easing="heartIn">
<p>heartIn</p>
<img src="images/heart.png" alt="Heart"/>
</div>
<div class="heart" data-easing="heartOut">
<p>heartOut</p>
<img src="images/heart.png" alt="Heart"/>
</div>
<div class="heart" data-easing="heartInOut">
<p>heartInOut</p>
<img src="images/heart.png" alt="Heart"/>
</div>
</article>
</main>
<footer>
© <a href="https://anton.shevchuk.name/jquery-book/">jQuery for beginners</a>
</footer>
<aside>
<nav>
<a href="index.html" title="back to Index" rel="index">Index</a>
<a href="animate.step.html" title="go prev" rel="prev">Prev</a>
<a href="index.html#90" title="back to Index" rel="index">Index</a>
<a href="#" title="reload" onclick="window.location.reload();return false">Reload</a>
<a href="sizzle.filter.html" title="go next" rel="next">Next</a>
</nav>
<hr/>
<div>
<label for="easing">Easing</label>:
<select id="easing" name="easing">
<option>linear</option>
<option>swing</option>
</select>`
<button id="button" type=button>Go&raquo;</button>
</div>
<img src="images/linear.png" alt="Linear"/>
</aside>
<aside id="output">
<h4>Output:</h4>
<hr/>
<code></code>
<code>$(<span>".target"</span>)
.animate(
{height:<span>"+=200px"</span>},
3000,
<span>"heartIn"</span>
)</code>
<button type="button">Run Code</button>
<code>$(<span>".target"</span>)
.animate(
{height:<span>"+=200px"</span>},
3000,
<span>"heartOut"</span>
)</code>
<button type="button">Run Code</button>
<code>$(<span>".target"</span>)
.animate(
{height:<span>"+=200px"</span>},
3000,
<span>"heartInOut"</span>
)</code>
<button type="button">Run Code</button>
</aside>
</body>
</html>
2 changes: 1 addition & 1 deletion animate.step.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -98,7 +98,7 @@ <h3>Article Title</h3>
<a href="animate.tweener.html" title="go prev" rel="prev">Prev</a>
<a href="index.html#90" title="back to Index" rel="index">Index</a>
<a href="#" title="reload" onclick="window.location.reload();return false">Reload</a>
<a href="easing.html" title="go next" rel="next">Next</a>
<a href="animate.easing.html" title="go next" rel="next">Next</a>
</nav>
</aside>
</body>
Expand Down
7 changes: 6 additions & 1 deletion css.priority.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -14,6 +14,11 @@
#id:before {
content: '<p id="id">'
}
button {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
text-align: left;
width: 100%;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/code.js"></script>
Expand Down Expand Up @@ -59,7 +64,7 @@ <h4>Шпаргалка по расчёту специфичности CSS сел
[0,1,0] > [0,0,100]
</code>
<hr/>

<h4>Добавляем стили на страницу</h4>
<button type="button" data-style>p { color:orange }</button>
<button type="button" data-style>.content p { color:green }</button>
<button type="button" data-style>article.content p { color:blue }</button>
Expand Down
56 changes: 30 additions & 26 deletions css.selectors.html
View file
Original file line number Diff line number Diff line change
Expand Up @@ -17,6 +17,11 @@
#last:before {
content: '<article class="box">';
}
button {
font-family: ui-monospace, SFMono-Regular, Menlo, Monaco, Consolas, "Liberation Mono", "Courier New", monospace;
text-align: left;
width: 100%;
}
</style>
<script type="text/javascript" src="js/jquery.js"></script>
<script type="text/javascript" src="js/jquery.color.js"></script>
Expand Down Expand Up @@ -67,39 +72,38 @@ <h3>Article Title</h3>
<a href="benchmark.html" title="go next" rel="next">Next</a>
</nav>
<hr/>
<div>
<code contenteditable="true">$(<span>'p'</span>)</code>
<button type="button" data-highlight>Run Code</button>
<code contenteditable="true">$(<span>"p"</span>)</code>
<button type="button" class="w-1/5" data-highlight>Run Code</button>
<hr/>
<button type="button" class="font-mono w-64" data-highlight>$('#content')</button>
<button type="button" class="font-mono w-64" data-highlight>$('main#content')</button>
<button type="button" data-highlight>$("#content")</button>
<button type="button" data-highlight>$("main#content")</button>
<hr/>
<button type="button" class="font-mono w-64" data-highlight>$('.box')</button>
<button type="button" class="font-mono w-64" data-highlight>$('.box.important')</button>
<button type="button" class="font-mono w-64" data-highlight>$('article.box')</button>
<button type="button" data-highlight>$(".box")</button>
<button type="button" data-highlight>$(".box.important")</button>
<button type="button" data-highlight>$("article.box")</button>
<hr/>
<button type="button" class="font-mono w-64" data-highlight>$('h2')</button>
<button type="button" class="font-mono w-64" data-highlight>$('h1, h2')</button>
<button type="button" data-highlight>$("h2")</button>
<button type="button" data-highlight>$("h1, h2")</button>
<hr/>
<button type="button" class="font-mono w-64" data-highlight>$('article h3')</button>
<button type="button" class="font-mono w-64" data-highlight>$('main article h3')</button>
<button type="button" class="font-mono w-full" data-highlight>$('article').find('h3')</button>
<button type="button" class="font-mono w-full" data-highlight>$('main').find('article').find('h3')</button>
<button type="button" data-highlight>$("article h3")</button>
<button type="button" data-highlight>$("main article h3")</button>
<button type="button" data-highlight>$("article").find("h3")</button>
<button type="button" data-highlight>$("main").find("article").find("h3")</button>
<hr/>
<button type="button" class="font-mono w-full" data-highlight>$('h1 + h2')</button>
<button type="button" class="font-mono w-full" data-highlight>$('#pinned ~ article')</button>
<button type="button" class="font-mono w-full" data-highlight>$('#pinned p').prev()</button>
<button type="button" class="font-mono w-full" data-highlight>$('#pinned').next()</button>
<button type="button" data-highlight>$("h1 + h2")</button>
<button type="button" data-highlight>$("#pinned ~ article")</button>
<button type="button" data-highlight>$("#pinned p").prev()</button>
<button type="button" data-highlight>$("#pinned").next()</button>
<hr/>
<button type="button" class="font-mono w-64" data-highlight>$('*')</button>
<button type="button" class="font-mono w-64" data-highlight>$('article > h3')</button>
<button type="button" class="font-mono w-64" data-highlight>$('article > *')</button>
<button type="button" class="font-mono w-64" data-highlight>$('article').children()</button>
<button type="button" data-highlight>$("*")</button>
<button type="button" data-highlight>$("article > h3")</button>
<button type="button" data-highlight>$("article > *")</button>
<button type="button" data-highlight>$("article").children()</button>
<hr/>
<button type="button" class="font-mono w-64" data-highlight>$('p').parent()</button>
<button type="button" class="font-mono w-64" data-highlight>$('p').parents()</button>
<button type="button" class="font-mono w-64" data-highlight>$('p').parents('main')</button>
</div>
<button type="button" data-highlight>$("p").parent()</button>
<button type="button" data-highlight>$("p").parents()</button>
<button type="button" data-highlight>$("p").parents("main")</button>

</aside>
</body>
</html>
Loading

0 comments on commit d9d1ff1

Please sign in to comment.