gsap+flip实现相册点击放大伸缩自适应布局效果代码
代码语言:html
所属分类:画廊相册
代码描述:gsap+flip实现相册点击放大伸缩自适应布局效果代码
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <style> :root { --base-color: #3f3352; --overlayH: 263; --overlayS: 23%; --overlayL: 26%; } * { box-sizing: border-box; } body { color: var(--base-color); padding: 1rem; margin: 0; min-height: 110vh; line-height: 1.6; font-family: muli, sans-serif; font-weight: 300; font-style: italic; font-size: 1.125rem; } h2, p { margin-top: 0; } h1, h2 { font-family: eloquent-jf-pro, serif; font-weight: 400; line-height: 1.125; } h2 { font-size: 1.25rem; } button { font-family: inherit; background: hsl(var(--overlayH), var(--overlayS), var(--overlayL)); color: white; border: none; padding: 0.5rem 0.75rem; text-transform: uppercase; cursor: pointer; } .button-inline { padding: 0; display: inline; background: transparent; color: inherit; text-decoration: underline; } main { visibility: hidden; } main { max-width: 1400px; margin: 1.5rem auto; display: grid; gap: 1rem; } @media (min-width: 800px) { main { grid-template-columns: 1fr 3fr; gap: 2rem; } } img, a { display: block; height: 100%; } article a { position: absolute; left: 0; right: 0; } img { max-width: 100%; width: 100%; object-fit: cover; } .grid { display: grid; grid-gap: 1.5rem; list-style: none; margin: 0; padding: 0; grid-template-columns: 1fr 1fr; grid-auto-rows: minmax(16rem, max-content); position: relative; } @media (min-width: 1024px) { .grid { grid-template-columns: 1fr 1fr 1fr; } } .grid article { --max: 0; position: relative; overflow: hidden; } article:not(.details) button, article:first-child button { display: none; } article:first-child p:last-of-type { margin: 0; } .description { position: relative; height: 100%; display: flex; flex-direction: column; justify-content: space-between; padding: clamp(1rem, 2.5vmin, 2.25rem); } article.details { grid-row: span 2; grid-column: span 2; } .description { background: linear-gradient( 0deg, hsl(var(--overlayH), var(--overlayS), var(--overlayL), calc(1 * var(--max))) 0%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.738 * var(--max)) ) 19%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.541 * var(--max)) ) 34%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.382 * var(--max)) ) 47%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.278 * var(--max)) ) 56.5%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.194 * var(--max)) ) 65%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.126 * var(--max)) ) 73%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.075 * var(--max)) ) 80.2%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.042 * var(--max)) ) 86.1%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.021 * var(--max)) ) 91%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.008 * var(--max)) ) 95.2%, hsla( var(--overlayH), var(--overlayS), var(--overlayL), calc(0.002 * var(--max)) ) 98.2%, hsla(var(--overlayH), var(--overlayS), var(--overlayL), 0) 100% ); } .details-view { color: white; opacity: 0; transform: translateY(100%); } .article-6 { --overlayH: 47; --overlayS: 92%; --overlayL: 32%; } .article-2 { --overlayH: 353; --overlayS: 34%; --overlayL: 58%; } .article-5 { --overlayH: 136; --overlayS: 62%; --overlayL: 25%; --overlayH: 176; --overlayS: 49%; --overlayL: 16%; } </style> </head> <body> <main> <header> <h1>Let's try Flip by GreenSock</h1> <p>In this CodePen, I use Flip to animate changes in the <code>grid</code> property. I also tried to alter the initial DOM structure, by moving an element to the top of the list. What about sorting? Let's display the items in the <button type="button" id="alpha-order" class="button-inline">alphabetical order.</button></p> </header> <div class="grid"> <article class="article article-1"> <a href="#"> <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef20b92ee.png" alt=""> </a> <section class="description"> <h2>Dearest Diary</h2> <div class="details-view"> <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p> <button type="button">Move to top</button> </div> </section> </article> <article class="article article-2"> <a href="#"> <img src="//repo.bfw.wiki/bfwrepo/image/5e62ef41353c3.png" alt=""> </a> <section class="description"> <h2>Window Sill?</h2> <div class="details-view"> <p>Ginger is a flowering plant whose rhizome, ginger root or ginger, is widely used as a spice and a folk medicine.</p> <button type="button">Move to top</button> </div> </section> </article> <article class="article article-3"> <a href="#&quo.........完整代码请登录后点击上方下载按钮下载查看
网友评论0