forked from Aqro/gooey-hover-codrops
-
Notifications
You must be signed in to change notification settings - Fork 0
/
index.html
executable file
·142 lines (139 loc) · 22.4 KB
/
index.html
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
<!doctype html>
<html class="no-js" lang="en">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1">
<title>Gooey Hover Effects on Images with Three.js | Codrops</title>
<meta name="description" content="Demo for the tutorial on 'Gooey Hover Effect on Images with Three.js'" />
<meta name="keywords" content="threejs, webgl, hover, gooey, effect, hover, image, card, tutorial, demo" />
<meta name="author" content="Arno Di Nunzio" />
<link rel="shortcut icon" href="favicon.ico">
<link rel="stylesheet" href="https://use.typekit.net/lma7zwj.css">
<link rel="stylesheet" type="text/css" href="dist/app.css" />
<script>
document.documentElement.className = "js";
var supportsCssVars = function() { var e, t = document.createElement("style"); return t.innerHTML = "root: { --tmp-var: bold; }", document.head.appendChild(t), e = !!(window.CSS && window.CSS.supports && window.CSS.supports("font-weight", "var(--tmp-var)")), t.parentNode.removeChild(t), e };
supportsCssVars() || alert("Please view this demo in a modern browser that supports CSS Variables.");
</script>
<script src="dist/app.js"></script>
</head>
<body class="demo-1">
<main>
<div class="message">This is a hover effects demo, please view on desktop.</div>
<div class="frame">
<div class="frame__links">
<a href="https://github.com/Aqro/gooey-hover-codrops">Github</a>
<a href="http://tympanus.net/Tutorials/MotionHoverEffects/">Previous Demo</a>
<a href="https://tympanus.net/codrops/?p=43947">Article</a>
</div>
<div class="frame__demos">Gooey hover effects</div>
</div>
<h1 class="page-title | title">What's your next <span class="slideshow__title__offset | title__offset">destination?</span></h1>
<section class="content | scrollarea-ctn">
<div class="scrollarea | slideshow">
<ul class="slideshow-list">
<li class="slideshow-list__el">
<article class="tile | js-tile">
<a href="#">
<figure class="tile__fig">
<img src="dist/img/tiles/woods/base.jpg" data-hover="dist/img/tiles/woods/hover.jpg" alt="Woods & Forests" class="tile__img">
</figure>
<div class="tile__content">
<h2 class="tile__title | title title--medium ">Woods & <span class="title__offset title__offset--medium">Forests</span></h2>
<div class="tile__cta">
<span class="btn-inline">See more</span>
</div>
</div>
</a>
</article>
</li>
<li class="slideshow-list__el">
<article class="tile | js-tile">
<a href="#">
<figure class="tile__fig">
<img src="dist/img/tiles/rocks/base.jpg" data-hover="dist/img/tiles/rocks/hover.jpg" alt="Rocks & Mountains" class="tile__img">
</figure>
<div class="tile__content">
<h2 class="tile__title | title title--medium ">Rocks & <span class="title__offset title__offset--medium">Mountains</span></h2>
<div class="tile__cta">
<span class="btn-inline">See more</span>
</div>
</div>
</a>
</article>
</li>
<li class="slideshow-list__el">
<article class="tile | js-tile">
<a href="#">
<figure class="tile__fig">
<img src="dist/img/tiles/cities/base.jpg" data-hover="dist/img/tiles/cities/hover.jpg" alt="Cities & Skylines" class="tile__img">
</figure>
<div class="tile__content">
<h2 class="tile__title | title title--medium ">Cities & <span class="title__offset title__offset--medium">Skylines</span>
</spa>
</h2>
<div class="tile__cta">
<span class="btn-inline">See more</span>
</div>
</div>
</a>
</article>
</li>
<li class="slideshow-list__el">
<article class="tile | js-tile">
<a href="#">
<figure class="tile__fig">
<img src="dist/img/tiles/deserts/base.jpg" data-hover="dist/img/tiles/deserts/hover.jpg" alt="SAND & DESERTS" class="tile__img">
</figure>
<div class="tile__content">
<h2 class="tile__title | title title--medium ">Sand & <span class="title__offset title__offset--medium">Deserts</span>
</spa>
</h2>
<div class="tile__cta">
<span class="btn-inline">See more</span>
</div>
</div>
</a>
</article>
</li>
<li class="slideshow-list__el">
<article class="tile | js-tile">
<a href="#">
<figure class="tile__fig">
<img src="dist/img/tiles/snow/base.jpg" data-hover="dist/img/tiles/snow/hover.jpg" alt="Snow & Mountains" class="tile__img">
</figure>
<div class="tile__content">
<h2 class="tile__title | title title--medium ">Snow & <span class="title__offset title__offset--medium">Mountains</span>
</spa>
</h2>
<div class="tile__cta">
<span class="btn-inline">See more</span>
</div>
</div>
</a>
</article>
</li>
</ul>
</div>
<div class="slideshow__progress-ctn"><span class="slideshow__progress"></span></div>
</section>
<aside class="detail-view">
<div class="detail-view__inner">
<button class="close-detail">
<svg class="close-detail__round" xmlns="http://www.w3.org/2000/svg" width="135" height="137" viewBox="0 0 135 137">
<path class="close-detail__path" d="M69.4264024,136.918277 L68.7159593,128.864752 L71.5692787,128.613046 C72.0057194,128.574546 72.4192047,128.581638 72.8097471,128.634324 C73.2002895,128.68701 73.5465033,128.801695 73.8483989,128.978384 C74.1502946,129.155074 74.3982961,129.402903 74.5924111,129.721881 C74.786526,130.040859 74.9050113,130.443267 74.9478705,130.929116 C74.9892769,131.398495 74.9408299,131.813554 74.8025279,132.174304 C74.6642259,132.535055 74.460777,132.839307 74.192175,133.08707 C73.9235731,133.334832 73.6045999,133.528944 73.2352459,133.669411 C72.865892,133.809879 72.467118,133.898998 72.0389121,133.936772 L71.0013414,134.028302 L71.2421511,136.758101 L69.4264024,136.918277 Z M70.8738539,132.583114 L71.8002563,132.501391 C72.7884238,132.41422 73.2447264,131.942435 73.1691779,131.086023 C73.1321301,130.666052 72.9804014,130.380684 72.7139871,130.229911 C72.4475729,130.079138 72.0714469,130.025182 71.5855979,130.068041 L70.6591955,130.149764 L70.8738539,132.583114 Z M81.4893214,135.696701 L79.3592325,127.897553 L82.1224276,127.142874 C82.5371083,127.029617 82.9367556,126.963313 83.3213813,126.943959 C83.7060071,126.924606 84.0614687,126.97106 84.3877768,127.083322 C84.7140849,127.195584 84.9994522,127.385438 85.2438874,127.652888 C85.4883226,127.920338 85.6736999,128.285322 85.8000248,128.74785 C85.956842,129.322024 85.9582953,129.829361 85.8043849,130.269878 C85.6504745,130.710395 85.3912301,131.078984 85.0266437,131.375657 L87.6377296,134.017459 L85.6640188,134.556515 L83.4010365,132.153848 L82.4799715,132.405408 L83.2477183,135.216451 L81.4893214,135.696701 Z M82.0977316,131.005868 L82.9589873,130.770643 C83.9079681,130.511459 84.2768192,129.995105 84.0655517,129.221566 C83.9610069,128.838784 83.7684268,128.604308 83.4878057,128.51813 C83.2071845,128.431953 82.831628,128.453115 82.3611249,128.581618 L81.4998692,128.816843 L82.0977316,131.005868 Z M93.4377133,132.219468 L89.9476555,124.926767 L94.7796291,122.614336 L95.4433824,124.001291 L92.2668072,125.5215 L92.9680305,126.986752 L95.6636454,125.696715 L96.3220459,127.072485 L93.626431,128.362522 L94.4293584,130.04029 L97.7177849,128.466553 L98.3815382,129.853508 L93.4377133,132.219468 Z M105.532307,125.918189 L98.8233043,120.787833 L100.392564,119.656759 L103.381338,122.149266 C103.622413,122.342355 103.85451,122.533985 104.077632,122.72416 L104.405585,123.008331 C104.726808,123.29141 105.064867,123.580179 105.419773,123.874646 L105.460011,123.845644 C105.353061,123.555882 105.245401,123.27456 105.13703,123.001677 L104.80973,122.196486 L103.048233,117.742633 L104.557136,116.655062 L107.312813,124.634854 L105.532307,125.918189 Z M119.732466,110.178864 L118.589928,109.411347 L122.738672,103.235464 L123.881211,104.002982 L119.732466,110.178864 Z M133.683085,89.3661105 L125.817691,87.4953965 L126.480475,84.7087309 C126.581853,84.2824856 126.719236,83.892426 126.892626,83.5385405 C127.066016,83.1846549 127.284223,82.8924176 127.547253,82.6618197 C127.810283,82.4312219 128.123779,82.2742359 128.487751,82.1908572 C128.851722,82.1074785 129.270952,82.1222167 129.745451,82.2350722 C130.203866,82.3441021 130.582351,82.5212175 130.880918,82.7664238 C131.179485,83.0116301 131.403863,83.3007932 131.554059,83.6339217 C131.704254,83.9670502 131.787632,84.3310167 131.804193,84.7258319 C131.820755,85.1206472 131.779304,85.5271502 131.679838,85.9453532 L131.438826,86.9586862 L134.104856,87.5927779 L133.683085,89.3661105 Z M130.027398,86.6229906 L130.242587,85.718229 C130.472124,84.7531452 130.168694,84.1711461 129.332288,83.9722144 C128.922127,83.8746613 128.603436,83.9284456 128.376206,84.1335689 C128.148976,84.3386921 127.978936,84.6784984 127.86608,85.1529979 L127.650891,86.0577595 L130.027398,86.6229906 Z M136.337607,77.5330472 L128.265031,77.0886381 L128.422482,74.2285688 C128.446112,73.7993499 128.509534,73.3992352 128.612752,73.0282128 C128.715969,72.6571903 128.872401,72.3346381 129.082052,72.0605465 C129.291704,71.7864549 129.562026,71.5757311 129.893028,71.4283688 C130.224031,71.2810066 130.628898,71.2205042 131.107642,71.2468599 C131.701945,71.2795773 132.183729,71.4385659 132.553009,71.7238306 C132.922289,72.0090953 133.190033,72.3715574 133.356251,72.8112276 L136.687954,71.1690835 L136.575489,73.2119902 L133.580693,74.5994686 L133.528209,75.552825 L136.437804,75.7130031 L136.337607,77.5330472 Z M132.079603,75.4730767 L132.128679,74.5816266 C132.182753,73.5993756 131.809467,73.0862191 131.008809,73.0421414 C130.612607,73.0203298 130.329279,73.1289187 130.158817,73.3679112 C129.988354,73.6069037 129.88972,73.9698937 129.86291,74.4568921 L129.813834,75.3483423 L132.079603,75.4730767 Z M136.825702,65.1042244 L128.799939,66.0794782 L128.153759,60.7617948 L129.680131,60.5763171 L130.104934,64.0722015 L131.717473,63.8762533 L131.356988,60.9096753 L132.87105,60.7256933 L133.231535,63.6922714 L135.077953,63.4679031 L134.638192,59.8489241 L136.164564,59.6634464 L136.825702,65.1042244 Z M134.711445,51.6095314 L127.709626,56.3324322 L127.137976,54.4844279 L130.45339,52.4464415 C130.713271,52.27952 130.968906,52.1206426 131.220299,51.9698073 L131.594209,51.7495856 C131.964939,51.5353949 132.346429,51.3070607 132.738692,51.0645759 L132.724035,51.0171912 C132.415295,51.0261628 132.11433,51.0384992 131.821135,51.0542006 L130.509212,51.1326455 L126.170569,51.357036 L125.620906,49.5801089 L134.062842,49.5127573 L134.711445,51.6095314 Z M124.310829,33.1740724 L123.221346,34.0152043 L118.674687,28.1261047 L119.764171,27.2849728 L124.310829,33.1740724 Z M108.983801,13.3322251 L104.700003,20.1888329 L102.270745,18.6711072 C101.899168,18.4389575 101.573378,18.1842401 101.293364,17.9069473 C101.01335,17.6296545 100.806065,17.3295712 100.671504,17.0066883 C100.536944,16.6838054 100.488254,16.336597 100.525433,15.9650526 C100.562613,15.5935083 100.710416,15.200921 100.968847,14.787279 C101.218518,14.3876587 101.507194,14.0855215 101.834885,13.8808582 C102.162575,13.6761949 102.508238,13.5558714 102.871884,13.519884 C103.23553,13.4838966 103.607069,13.5210758 103.986512,13.6314228 C104.365955,13.7417697 104.737953,13.9108254 105.102519,14.138595 L105.985886,14.6904952 L107.437909,12.3663996 L108.983801,13.3322251 Z M105.217168,15.9208988 L104.428447,15.4281307 C103.587142,14.9025087 102.938729,15.0042621 102.48319,15.7333937 C102.259801,16.0909487 102.209031,16.4101334 102.330879,16.6909575 C102.452727,16.9717816 102.720468,17.241405 103.13411,17.4998358 L103.92283,17.9926039 L105.217168,15.9208988 Z M98.6243891,7.04269369 L95.6283213,14.5518594 L92.9678654,13.4903691 C92.568603,13.3310682 92.2096174,13.1433358 91.8908976,12.9271662 C91.5721779,12.7109967 91.3163701,12.4598528 91.1234667,12.1737269 C90.9305632,11.887601 90.8170698,11.5641847 90.7829831,11.2034684 C90.7488963,10.842752 90.8206928,10.4397344 90.9983746,9.99440329 C91.2189451,9.44157851 91.5233016,9.03567154 91.9114533,8.77667021 C92.299605,8.51766888 92.7285356,8.37952235 93.198258,8.36222647 L92.7045867,4.68076297 L94.6049124,5.4389703 L94.964682,8.71989423 L95.8515006,9.07372432 L96.9313717,6.36719988 L98.6243891,7.04269369 Z M95.3138627,10.421228 L94.4846297,10.0903739 C93.5709332,9.72581983 92.9655153,9.91592887 92.6683578,10.6607067 C92.5213108,11.0292565 92.5338558,11.3324213 92.7059934,11.57021 C92.8781309,11.8079987 93.1906996,12.0172625 93.6437088,12.1980078 L94.4729418,12.5288619 L95.3138627,10.421228 Z M86.9958305,2.62258376 L85.3889836,10.5460952 L80.1390496,9.48143595 L80.4446462,7.97451045 L83.8959917,8.67442536 L84.2188398,7.08243149 L81.2900572,6.48848961 L81.5931893,4.99371674 L84.521972,5.58765861 L84.8916453,3.76476487 L81.3187736,3.04020508 L81.6243702,1.53327958 L86.9958305,2.62258376 Z M73.5223561,0.363133191 L75.7821586,8.5009803 L73.8482508,8.45734435 L72.9663311,4.66688559 C72.8903983,4.36749503 72.8207492,4.07468044 72.7573828,3.78843795 L72.6670452,3.3640028 C72.5814195,2.94449576 72.4857907,2.51029908 72.3801562,2.06139973 L72.3305688,2.06028086 C72.2412095,2.35594183 72.1575058,2.64529623 72.0794566,2.92834787 L71.8551678,3.76808072 L70.5754838,8.38349889 L68.7159571,8.34154124 L71.3281146,0.313623169 L73.5223561,0.363133191 Z M52.7279082,4.35179576 L53.1784058,5.65238366 L46.1482009,8.08750569 L45.6977034,6.78691778 L52.7279082,4.35179576 Z M29.0581374,12.5811532 L34.207671,18.8138328 L31.999467,20.6382841 C31.6617025,20.9173502 31.3170118,21.1458425 30.9653846,21.3237679 C30.6137574,21.5016934 30.2635151,21.6034144 29.9146473,21.6289343 C29.5657795,21.6544541 29.2209973,21.5908174 28.8802904,21.4380223 C28.5395835,21.2852272 28.2139056,21.0208327 27.9032472,20.6448307 C27.6031195,20.2815745 27.4078076,19.9121505 27.3173056,19.5365474 C27.2268036,19.1609443 27.2219959,18.7949694 27.3028821,18.4386118 C27.3837684,18.0822541 27.5365612,17.7415523 27.7612651,17.4164961 C27.985969,17.0914399 28.2640126,16.792016 28.5954042,16.5182153 L29.3983874,15.8547784 L27.6529167,13.7421677 L29.0581374,12.5811532 Z M30.3224602,16.9732194 L29.6055108,17.5655737 C28.840761,18.1974215 28.7321885,18.8447272 29.2797899,19.5075104 C29.5483252,19.832529 29.8350622,19.9816544 30.1400094,19.954891 C30.4449567,19.9281275 30.7854262,19.7594191 31.1614282,19.4487606 L31.8783775,18.8564063 L30.3224602,16.9732194 Z M19.8116661,20.4176625 L25.9794815,25.6447117 L24.1275668,27.8299346 C23.8496446,28.1578774 23.557564,28.4385962 23.2513161,28.6720995 C22.9450683,28.9056029 22.6256514,29.0683411 22.2930558,29.160319 C21.9604602,29.2522969 21.6177424,29.2571309 21.2648922,29.1748211 C20.912042,29.0925113 20.5527311,28.8963642 20.1869488,28.5863741 C19.7328743,28.2015587 19.4447276,27.7839885 19.3225001,27.333651 C19.2002727,26.8833135 19.2055942,26.4327166 19.3384648,25.9818467 L15.6909555,25.2800201 L17.0137517,23.7191465 L20.2389323,24.420649 L20.8562372,23.6922414 L18.6331749,21.8082589 L19.8116661,20.4176625 Z M21.9630385,24.6302241 L21.3858183,25.3113326 C20.749804,26.0618169 20.7376667,26.6962655 21.3494061,27.2146973 C21.6521225,27.4712409 21.9435588,27.5556868 22.2237238,27.4680376 C22.5038887,27.3803883 22.8016341,27.1505227 23.116969,26.7784338 L23.6941891,26.0973254 L21.9630385,24.6302241 Z M11.9170284,30.0433498 L18.9120058,34.0972716 L16.2259717,38.7319805 L14.8956386,37.9609893 L16.6614573,34.9140973 L15.2560247,34.0995823 L13.7575659,36.6851491 L12.4379612,35.9203755 L13.9364201,33.3348087 L12.3271461,32.402158 L10.4991507,35.5563349 L9.16881756,34.7853436 L11.9170284,30.0433498 Z M5.48411182,42.0733893 L13.9180631,42.5202992 L13.2613704,44.3398206 L9.38729007,43.9698723 C9.07929837,43.9465999 8.7795402,43.9194627 8.48801162,43.8884603 L8.05689045,43.8390578 C7.63194048,43.7867563 7.18988155,43.739264 6.7307004,43.6965796 L6.71386212,43.743234 C6.96572595,43.9220218 7.21341044,44.0934414 7.45691884,44.257495 L8.1816485,44.7373112 L12.1500442,47.4190106 L11.5186089,49.1685504 L4.73901815,44.1378462 L5.48411182,42.0733893 Z M2.67769087,63.0693074 L4.05402348,63.0556877 L4.12764395,70.4953234 L2.75131134,70.5089432 L2.67769087,63.0693074 Z M2.93930277,88.1462587 L10.4864014,85.2470704 L11.5135678,87.9209658 C11.6706821,88.3299619 11.7776466,88.7294353 11.8344646,89.119398 C11.8912826,89.5093606 11.876296,89.8737673 11.7895042,90.2126289 C11.7027124,90.5514906 11.5326959,90.8581154 11.2794495,91.1325125 C11.0262031,91.4069097 10.6719365,91.6315553 10.2166389,91.8064561 C9.77677509,91.9754281 9.36440901,92.0430675 8.97952824,92.0093765 C8.59464748,91.9756856 8.24615671,91.8638155 7.93404548,91.6737631 C7.62193425,91.4837106 7.34754119,91.230468 7.11085806,90.9140277 C6.87417492,90.5975874 6.67876137,90.238733 6.52461152,89.8374538 L6.15109646,88.8651282 L3.59295413,89.8478285 L2.93930277,88.1462587 Z M7.50540711,88.344875 L7.8389027,89.2130229 C8.19463311,90.1390519 8.77376886,90.4479119 9.57632733,90.1396122 C9.96988966,89.9884268 10.2024875,89.7640282 10.2741277,89.4664097 C10.345768,89.1687912 10.2941385,88.7923387 10.1192377,88.3370411 L9.78574213,87.4688933 L7.50540711,88.344875 Z M7.42689365,99.3947459 L14.3370242,95.197832 L15.8239677,97.6460531 C16.0471176,98.0134647 16.22099,98.3793644 16.3455901,98.743763 C16.4701901,99.1081617 16.5234942,99.4626607 16.5055038,99.8072708 C16.4875133,100.151881 16.3836538,100.478518 16.1939219,100.787193 C16.0041901,101.095868 15.704426,101.37465 15.2946207,101.623548 C14.7858969,101.932524 14.2986054,102.073735 13.8327316,102.047183 C13.3668578,102.020631 12.9410978,101.873002 12.5554389,101.604291 L10.7355037,104.842303 L9.67340124,103.093573 L11.3593927,100.256087 L10.8637449,99.4400134 L8.37313037,100.952705 L7.42689365,99.3947459 Z M12.103753,98.6868862 L12.5672159,99.4499681 C13.0778859,100.290776 13.6758939,100.503046 14.361258,100.086785 C14.7004072,99.8808009 14.8727323,99.6310605 14.8782385,99.3375567 C14.8837448,99.0440529 14.7599051,98.6888709 14.5067158,98.272 L14.0432529,97.5089181 L12.103753,98.6868862 Z M14.057107,109.92635 L20.1164064,104.573885 L23.6628249,108.588635 L22.5104428,109.606589 L20.179001,106.967262 L18.9615651,108.042681 L20.9400069,110.282391 L19.7969182,111.292135 L17.8184764,109.052425 L16.4244658,110.28382 L18.8380006,113.016081 L17.6856185,114.034034 L14.057107,109.92635 Z M23.4389036,119.850513 L26.5460638,111.997054 L28.0620846,113.198547 L26.4787251,116.75359 C26.3586667,117.038171 26.2375641,117.313717 26.1154156,117.580231 L25.9314083,117.973229 C25.7466163,118.359454 25.5609398,118.763429 25.3743735,119.185167 L25.4132458,119.215974 C25.6628793,119.034085 25.9041976,118.853814 26.137204,118.675158 L26.48048,118.408385 C26.7051752,118.231344 26.9367411,118.051548 27.1751808,117.868994 L30.6276584,115.231842 L32.0853707,116.387123 L25.1590041,121.213745 L23.4389036,119.850513 Z M42.4400234,129.202853 L42.86354,127.893231 L49.9425796,130.18251 L49.519063,131.492132 L42.4400234,129.202853 Z" opacity=".2" transform="translate(-2)" />
</svg>
<img src="dist/img/back.svg" alt="Back to slideshow" class="close-detail__back">
</button>
<div class="detail-view__content">
<h2 class="detail-view__title | title title--large">Woods & forests</h2>
<p>In recent years people have realized the importance of proper diet and exercise, and recent surveys show that over the last 20 years people are eating better and working out more often, resulting in people living longer, but people are still lacking in their understanding that their mental well being is just as important as their physical health.</p>
<p>Today most people get on average 4 to 6 hours of exercise every day, and make sure that everything they put in their mouths is not filled with sugars or preservatives, but they pay no attention to their mental health, no vacations, not even the occasional long weekend, 60 hour weeks, taking work home with them and even working weekends. All of this for hopes of one day getting that big promotion. What good will it do you when your brain overloads and you have a breakdown in the office.</p>
<p>In the end your physical health will suffer no matter how well you eat and how often you exercise. You will wind up with high blood pressure, stress and tension all of which raises the chances of you having a stroke or heart attack. In hopes of helping you avoid this I am providing you with the things I do to keep my mental health in tip top condition.</p>
</div>
</div>
</aside>
<canvas id="scene"></canvas>
</main>
</body>
</html>