diff --git a/src/blocks/KieronCoombs/icon.jpg b/src/blocks/KieronCoombs/icon.jpg new file mode 100644 index 00000000..02b76ad4 Binary files /dev/null and b/src/blocks/KieronCoombs/icon.jpg differ diff --git a/src/blocks/KieronCoombs/index.html b/src/blocks/KieronCoombs/index.html new file mode 100644 index 00000000..845b9973 --- /dev/null +++ b/src/blocks/KieronCoombs/index.html @@ -0,0 +1,27 @@ + + + + + + + + Animated Buttons + + +
+

My Button Animation Page

+

Just a text making some button animations. hope you guys enjoy them :)

+
+ +
+
Animation 1
+
Animation 2
+
Animation 3
+
Animation 4
+
Animation 5
+
Animation 6
+
Animation 7
+
+ + + \ No newline at end of file diff --git a/src/blocks/KieronCoombs/meta.json b/src/blocks/KieronCoombs/meta.json new file mode 100644 index 00000000..d116d560 --- /dev/null +++ b/src/blocks/KieronCoombs/meta.json @@ -0,0 +1,5 @@ +{ + "block_name": "Button Animations", + "author_name": "Kieroncoombs", + "author_github-url": "https://github.com/Kieroncoombs" +} \ No newline at end of file diff --git a/src/blocks/KieronCoombs/script.js b/src/blocks/KieronCoombs/script.js new file mode 100644 index 00000000..eb4109ae --- /dev/null +++ b/src/blocks/KieronCoombs/script.js @@ -0,0 +1,10 @@ +const box5 = document.getElementById('box5'); +const span = document.getElementById('span'); + +box5.addEventListener('mouseenter', () => { + span.appendChild(document.createTextNode('Image?')); +}); + +box5.addEventListener('mouseleave', () => { + span.removeChild(span.firstChild); +}); \ No newline at end of file diff --git a/src/blocks/KieronCoombs/style.css b/src/blocks/KieronCoombs/style.css new file mode 100644 index 00000000..0db54202 --- /dev/null +++ b/src/blocks/KieronCoombs/style.css @@ -0,0 +1,279 @@ +* { + margin: 0; + font-family:system-ui, -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif +} +body{ + background-color: rgb(32, 32, 32); + display: flex; + justify-content: center; + flex-direction: column; +} +header{ + text-align: center; + padding: 50px; + color: aliceblue; + font-size: 1.6rem; +} +p { + padding: 20px; +} +.container{ + + display: grid; + align-items: center; + grid-template-columns: repeat(auto-fill, minmax(250px, 1fr) ); + grid-template-rows: 1fr; + gap: 50px; + padding: 50px; + +} +.block{ + height: 300px; + background-color: rgb(0, 0, 0); + transition: 0.5s; + display: flex; + font-size: larger; + justify-content: center; + align-items: center; + color: white; + border: 2px solid white; + border-radius: 5px; + text-align: center; + position: relative; + overflow: hidden; + cursor: pointer; + +} +.block.first:hover{ + height: 300px; + transform:translateY(-10px); + background-color: rgb(255, 255, 254); + transition: 0.5s; + color: black; +} +span { + position: relative; + z-index: 1; + +} +.second::before{ +content: ""; +position: absolute; +width: 500px; +height: 500px; +background-color: rgb(255, 255, 255); +border-radius: 25px; +transform: translateY(400px); +opacity: 0; +transition: 0.5s ease; + +} +@keyframes fill { + from { + transform: translateY(400px) rotate(0deg); + } + to { + transform: translateY(90px); + } +} +.second:hover::before{ + transform:translateY(90px); + opacity: 1; + animation: fill 0.5s ease; +} +.second:hover { + color: black; + transition: 0.8s ease; + transform:translateY(-10px); +} +.third::before{ + transform:scale(0); + content: ""; + position: absolute; + width: 50px; + height: 50px; + background-color: white; + border-radius: 50px; + transition: 0.5s ease; + opacity: 0; +} +@keyframes expand { + from { + transform: scale(0); + } + to { + transform: scale(12); + } +} +.third:hover::before{ + transform:translateY(-5px); + opacity: 1; + animation: expand 0.5s ease; + transform:scale(12); +} +.third:hover{ + color: black; + transform:translateY(-10px); +} +.forth::before{ + position: absolute; + content: ''; + width: 500px; + height: 200px; + background-color: white; + left: 375px; + bottom: 150px; + transition: 0.5s ease; + opacity: 0; +} +.forth::after{ + position: absolute; + content: ''; + width: 500px; + height: 200px; + background-color: white; + right: 375px; + bottom: -50px; + transition: 0.5s ease; + opacity: 0; +} +@keyframes slideleft { + from { + left: 375px; + } + to { + left: -20px; + } +} +@keyframes slideright { + from { + right: 375px; + } + to { + right: -20px; + } +} +.forth:hover::before{ + left: -20px; + opacity: 1; + animation: slideleft 0.5s ease; + transform:translateY(-10px); +} + +.forth:hover::after{ + right: -20px; + opacity: 1; + animation: slideright 0.5s ease; + transform:translateY(-10px); +} +.forth:hover{ + color: black; + transform:translateY(-10px); +} +.fith::before{ + position: absolute; + content: ''; + width: 500px; + height: 500px; + background-color: white; + left: 103px; + transform: translateY(500px) rotate(47deg); + transition: 0.5s; + opacity: 0; + z-index: 1; +} +@keyframes spin { + from { + transform: translateY(500px) rotate(45deg); + } + to { + transform: translateY(150px) rotate(45deg); + } +} +.fith:hover::before{ + left: 103px; + transform: translateY(150px) rotate(45deg); + opacity: 1; + animation: spin 0.6s ease; +} +.fith:hover{ + color: rgb(255, 255, 255); + transform:translateY(-10px); + z-index: 1; +} +#span{ + color: black; + font-size: larger; + transform: translateX(30px); + transition: 0.5s; +} +.sixth::before{ + content: ""; + position: absolute; + width: 400px; + height: 400px; + transition: 0.5s; + transform: scale(1); + opacity: 1; + border-radius: 5px; + +} +@keyframes pulse { + from { + transform: scale(0); + opacity: 1; + + } + to{ + transform: scale(1); + background-color: white; + opacity: 0; + } +} +.sixth:hover::before{ + transform: scale(1); + opacity: 0; + animation: pulse .5s ease-in-out; + transition: 0.2s; +} +.sixth:hover{ + transform:translateY(-10px); +} +.seventh::before{ + content: ""; + position: absolute; + width: 350px; + height: 350px; + background-color: white; + opacity: 0; + transition: 0.5s; + transform: scale(1); + + z-index: -1; +} +@keyframes surround { + from { + transform: scale(1); + opacity: 0; + } + to { + opacity: 1; + -webkit-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7); + -moz-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7); + box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7); + } +} +.seventh:hover::before{ + -webkit-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7); + -moz-box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7); + box-shadow: inset -1px 0px 80px -1px rgba(0,0,0,0.7); + transform: scale(1); + opacity: 1; + animation: surround .2s ease-in-out; + transition: 0.5s; +} +.seventh:hover{ + transform:translateY(-10px); + color: black; + +} \ No newline at end of file