A Pen by HARUN PEHLİVAN on CodePen.
HARUN PEHLİVAN harunpehlivan
🏠
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <div class="cover"> | |
| <div class="shade"></div> | |
| <div class="loader"></div> | |
| </div> | |
| <style> | |
| .top-nav { | |
| position: fixed; | |
| z-index: 1400; | |
| width: 100%; | |
| top: 15px; |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| main#home-page(data-wrapper="", role="main") | |
| .container | |
| h2.font-sz-3xl.font-sans.font-400 Timing Options | |
| .animation-containers.jumbotron.jumbotron-fluid.my-2.p-4.rounded-lg.box-shadow.text-dark.bg-warning | |
| .animation-container.timing-options-demo | |
| h3.font-sz-xl.font-sans.font-400 duration, delay, endDelay, speed, easing, loop, and direction | |
| p Click on the box to play the animation | |
| .row.mx-0.align-items-center | |
| - let options = ['duration', 'delay', 'endDelay', 'speed', 'loop']; |
harunpehlivan
/ animate-timing-options-callback-function-type.markdown
Created
June 5, 2021 07:31
/animate - timing options - callback/function type
A Pen by HARUN PEHLİVAN on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| main#home-page(data-wrapper="", role="main") | |
| .container-fluid | |
| h2.font-sz-4xl.font-sans.font-600 Promises & Callbacks | |
| .animation-containers.jumbotron.jumbotron-fluid.my-2.p-4.rounded-lg.box-shadow.text-dark.bg-warning | |
| .animation-container.promises-and-callback-demo | |
| //- h3.font-sz-xl.font-sans.font-400 Keyframes | |
| p Click on the box to play the animation (open the console to see the logs) | |
| - for (let i = 0; i < 5; i ++) { | |
| .contain | |
| .el |
harunpehlivan
/ index.pug
Created
June 5, 2021 07:28
properties - css transforms (transformable css properties)
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| main#home-page(data-wrapper="", role="main") | |
| .container | |
| h2.font-sz-3xl.font-sans.font-400 Properties | |
| .animation-containers.jumbotron.jumbotron-fluid.my-2.p-4.rounded-lg.box-shadow.text-dark.bg-warning | |
| .animation-container.css-transform-demo | |
| h3.font-sz-xl.font-sans.font-400 CSS Transforms (Transformable CSS Properties) | |
| p Click on the box to play the animation | |
| .contain | |
| .el | |
| .el-initial |
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| main#home-page(data-wrapper="", role="main") | |
| .container | |
| h2.font-sz-3xl.font-sans.font-400 Properties | |
| .animation-containers.jumbotron.jumbotron-fluid.my-2.p-4.rounded-lg.box-shadow.text-dark.bg-warning | |
| .motion-path-demo | |
| .flex.justify-evenly.flex-wrap | |
| .motion-path | |
| h2.text-center.text-lg.font-bold Motion Path/Offset Path | |
| .relative | |
| .small.square.shadow.el-initial |
A Pen by HARUN PEHLİVAN on CodePen.
This file contains bidirectional Unicode text that may be interpreted or compiled differently than what appears below. To review, open the file in an editor that reveals hidden Unicode characters.
Learn more about bidirectional Unicode characters
| <!DOCTYPE html> | |
| <!-- Created By CodingNepal - www.codingnepalweb.com --> | |
| <html lang="en"> | |
| <head> | |
| <meta charset="UTF-8"> | |
| <meta name="viewport" content="width=device-width, initial-scale=1.0"> | |
| <title>HARUN PEHLİVAN </title> | |
| <link rel="stylesheet" href="style.css"> | |
| <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/5.15.3/css/all.min.css"/> | |
| <link rel="stylesheet" href="https://unicons.iconscout.com/release/v3.0.6/css/line.css"> |
A Pen by HARUN PEHLİVAN on CodePen.