js+css实现图文人物介绍幻灯片效果代码
代码语言:html
所属分类:幻灯片
代码描述:js+css实现图文人物介绍幻灯片效果代码,点击人物图片进行切换,还可通过视频文字进行介绍。
下面为部分代码预览,完整代码请点击下载或在bfwstudio webide中打开
<!DOCTYPE html> <html lang="en" > <head> <meta charset="UTF-8"> <meta name="viewport" content="width=device-width, initial-scale=1"> <!-- Fonts--> <link href="https://fonts.googleapis.com/css?family=Atma" rel="stylesheet"> <link href="https://fonts.googleapis.com/css?family=Open+Sans|Open+Sans+Condensed:300" rel="stylesheet"> <style> *, *::after, *::before { box-sizing: border-box; } @font-face { font-family: "font"; src: url("//repo.bfw.wiki/bfwrepo/font/OakesGrotesk-Semi-Bold.woff2"); src: url("//repo.bfw.wiki/bfwrepo/font/OakesGrotesk-Semi-Bold.woff"); font-weight: 600; font-style: normal; } @font-face { font-family: "font-2"; src: url("//repo.bfw.wiki/bfwrepo/font/MaisonNeue-Book.woff2"); src: url("//repo.bfw.wiki/bfwrepo/font/MaisonNeue-Book.woff"); font-weight: normal; font-style: normal; } body { font-family: 'Open Sans Condensed', sans-serif; min-height: 100vh; color: #fff8dc; background-color: #000; -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; padding-top: 10em; font-size: 14px; overflow: hidden; } @media screen and (min-width: 320px) { body { font-size: calc(14px + 6 * ((100vw - 320px) / 960)); } } @media screen and (min-width: 1280px) { body { font-size: 20px; } } /* Page Loader */ .loading { background: #000; z-index: 200; position: absolute; left: 0; top: 0; width: 100%; height: 100%; } .js .loading::before { content: ''; position: fixed; z-index: 4; top: 0; left: 0; width: 100%; height: 100%; background: #000; } .js .loading::after { content: ''; position: fixed; z-index: 4; top: 50%; left: 50%; width: 60px; height: 60px; margin: -30px 0 0 -30px; pointer-events: none; border-radius: 50%; opacity: 0.4; background: rgba(255,99,71,0.6); -webkit-animation: loaderAnim 0.7s linear infinite alternate forwards; animation: loaderAnim 0.7s linear infinite alternate forwards; } a { text-decoration: none; color: rgba(255,99,71,0.6); outline: none; } a:hover, a:focus { color: #ff4500; outline: none; } .cit { color: #cca700 !important; font-style: italic; } .cit:before { content: '« '; } .cit:after { content: ' »'; } .orangered { color: #ff4500; } .gold { color: #cca700; } .hidden { position: absolute; overflow: hidden; width: 0; height: 0; pointer-events: none; } .message { position: relative; z-index: 1; display: none; padding: 1em; text-align: center; color: #000; background: #fff8dc; } /* Icons */ .icon { display: block; width: 1.5em; height: 1.5em; margin: 0 auto; fill: currentColor; } .frame { position: fixed; z-index: 3; top: 2vh; left: 0; width: 100%; max-width: none; min-height: 0; height: 90vh; padding: 1em; pointer-events: none; } .frame a { pointer-events: auto; } /* Header */ .header { position: relative; z-index: 1; margin-left: 31vw; transform: translateX(-50%); margin-top: -3vh; font-family: font; font-weight: 100; } .header__title { position: absolute; width: 150px; font-size: 1em; font-weight: normal; line-height: 1; color: $color--text; flex-wrap: wrap; align-items: top; padding: 0; display: flex; justify-content: flex; text-transform: uppercase; flex-wrap: wrap; align-items: top; padding: 0; letter-spacing: 0.3em; } .header__title:before { content: "What You Gonna Do When the"; letter-spacing: 0.1em; font-size: 1em; } .header__title:after { content: " de Roberto Minervini"; letter-spacing: 0; opacity: 0.7; font-family: 'Open Sans Condensed', sans-serif; text-transform: none; font-size: 0.9em; } /* Top Navigation Style */ .icon { display: inline-block; padding: 0.25em; margin: 0.25em 0 0 0; } /* SLIDESHOW */ .slideshow { position: relative; overflow: hidden; margin: 0; width: 100%; height: calc(100vh - 20vh); display: grid; grid-template-columns: 33% 33% 33%; grid-column-gap: 0.5%; grid-template-rows: 100%; grid-template-areas: '... slide ...'; } .slide { width: 100%; display: flex; pointer-events: none; cursor: pointer; position: relative; height: 85vh; grid-area: slide; } .slideshow--previewopen .slide { cursor: default; } .slide--current { pointer-events: auto; } .slide__img-wrap { width: 100%; overflow: hidden; z-index: 1; height: 65%; top: 10%; position: absolute; } .slide__img-wrap .bg--5 { background-image: url("//repo.bfw.wiki/bfwrepo/image/5fb390d10ad81.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90"); background-position: 8% bottom; } .slideshow__deco { grid-area: slide; background: linear-gradient(#000, rgba(254,246,225,0.11)); width: 100%; height: 56%; align-self: center; position: relative; margin: -4px 0 0 0; right: -3px; } .nav { position: absolute; background: none; width: 3em; height: 3em; z-index: 1; border: 0; padding: 0; margin: 0; pointer-events: none; transition: transform 0.8s opacity 0.8s; transition-timing-function: cubic-bezier(0.7, 0, 0.3, 1); } .nav--next { bottom: 0; right: 0; } .icon--navarrow-next { transform: rotate(0deg); } .nav--prev { top: 0; left: 0; } .icon--navarrow-prev { transform: rotate(180deg); } .slideshow--previewopen .nav { opacity: 0; transition-duration: 0.4s; } .slideshow--previewopen .nav--next { transform: translate3d(100%, 100%, 0); } .slideshow--previewopen .nav--prev { transform: translate3d(-100%, -100%, 0); } .slide__img { width: 100%; height: 100%; left: 0; top: 0; background-size: cover; background-position: 50% 50%; position: absolute; pointer-events: none; transform: scale3d(1.01, 1.01, 1); } .js .slide__img-wrap, .js .slide__title-wrap, .js .slide__side { opacity: 0; pointer-events: none; } .js .slide--current .slide__img-wrap { opacity: 1; pointer-events: auto; } .slide--visible .slide__img-wrap { pointer-events: auto; } .slide__title-wrap { justify-self: flex-end; width: 100%; position: relative; z-index: 2; text-shadow: 1px 0 0 #111; } .slide__number { display: block; font-size: 1em; font-weight: 100; opacity: 0.8; padding-bottom: 1em; font-family: 'Open Sans Condensed', sans-serif; } .slide__number::before { content: "☆"; display: inline-block; margin: 0 1em 0 0; color: #ff4500; } .slide__subtitle { text-align: left; } .slide__title, .slide__subtitle, .slide__side { display: none; } .content { position: fixed; top: 10vh; left: 0; width: 100%; height: calc(100% - 10vh); pointer-events: none; z-index: 1; } .content__item { position: absolute; top: 0; right: 0; width: 100%; padding: 10vh 7vw 0 30vw; text-align: justify; text-shadow: 1px 0 0 #000; } .content__item--current, .content__item--current ~ .content__close { pointer-events: auto; } .content__close { position: absolute; top: 0; left: 39% !important; background: transparent; color: currentColor; border: 0; margin: 0; padding: 0; cursor: pointer; } .icon--longarrow { width: 2em; transform: rotate(45deg); } .content__close:focus { outline: none; } .content__number { font-weight: normal; color: rgba(255,248,220,0.5); } .content__number::before { content: "☆"; display: inline-block; margin: 0 1em 0 0; color: #ff4500; } .content__title { text-align: left; margin: 0.5em 0; font-size: 1.3em; letter-spacing: 0.1em; } .content__subtitle { margin: 0 0 0.5em; font-size: 1.2em; font-weight: normal; } .content__subtitle span { font-size: 0.7em; } .content__text { font-size: 1em; } .content__contact span { margin: 0; } .content__contact span:before { color: rgba(255,99,71,0.6); content: '\A Contact presse ▾'; white-space: pre; } .content__contact span:after { content: '\A MAKNA PRESSE \A Chloé Lorenzi \A 01 42 77 00 16 \A info@makna-presse.com'; white-space: pre; } .right { float: right; text-align: right; } .left { float: left; text-align: left; } .js .content__title, .js .content__subtitle, .js .content__number, .js .content__text, .js .content__contact, .js .content__close { opacity: 0; } .fa { background-color: #000; height: 100vh; width: 150%; margin-left: -50%; } .fa object { width: 130% !important; height: 100vh; margin-left: 50%; margin-top: 50%; transform: translate(-50%, -50%); } .dp { background-color: #000; height: 100vh; width: 150%; margin-left: -55%; } .dp object { width: 100% !important; height: 50%; margin-left: 58%; transform: translateX(-50%); margin-top: 5vh; } .tel { background-color: #000; height: 100vh; width: 150%; margin-left: -55%; } .tel object { width: 100% !important; height: 130vh; margin-left: 58%; transform: translateX(-50%); margin-top: -5vh; } .phone:before { content: "ut : invité(e)"; content: "\A mdp : acor"; white-space: pre; } .extrait { margin-top: 25px; font-style: italic; font-weight: normal; -moz-column-count: 1; column-count: 1; font-size: 1.2em; -moz-column-gap: 0; column-gap: 0; max-width: 600px; text-align: justify; line-height: 1.4; } .extrait span:before { color: #cca700; content: "« "; font-weight: bold; } .extrait span:after { color: #cca700; content: " »"; font-weight: bold; } .link { float: right; text-align: right; font-size: 0.8em; } @media screen and (min-width: 769px) { body { padding: 0; } .frame { top: 0; display: grid; align-items: start; justify-items: end; grid-template-columns: 50% 50%; grid-template-rows: 100%; grid-template-areas: '... header'; } .header { grid-area: header; padding: 0 250px 0 0; top: 0; right: 0; display: block; } .header__title { float: right; margin-top: 50px; margin-left: 200px; width: 200px; display: flex; justify-content: flex; text-transform: uppercase; flex-wrap: wrap; align-items: top; padding: 0; font-size: 1.33em; letter-spacing: 0.3em; } .header__title:before { content: "What You Gonna Do When the"; letter-spacing: 0.15em; font-size: 1em; } .header__title:after { content: " de Roberto Minervini"; letter-spacing: 0.02em; opacity: 0.9; font-family: 'Open Sans Condensed', sans-serif; text-transform: none; font-size: 0.9em; } .links { margin: 0.25em auto 0 0.25em; } .slideshow { height: 100vh; grid-template-columns: 27% 27% 27%; grid-column-gap: 9.5%; } .slide { padding: 10vh 0 7vh; flex-direction: column; justify-content: space-between; height: 100vh; } .slide__img-wrap { height: 80vh; top: 10vh; position: absolute; } .slide__side { margin: 4em 0 2em -2.4em; text-align: center !important; font-size: 0.8em; letter-spacing: 0.05em; } .slide__title-wrap { margin: 0 0 0 -1.85em; } .slide__title, .slide__subtitle, .slide__side { display: block; } .slide__title { font-size: 1.5em; margin: 0 0 0.25em; } .acor--title { letter-spacing: 0.12em; } .slide__subtitle { font-weight: normal; margin: 0; font-size: 1.255em; min-height: 50px; text-align: left; } .slide__subtitle span { font-size: 0.6em; opacity: 0.7; } .slide__side { color: #ff4500; position: relative; -ms-writing-mode: tb-rl; writing-mode: vertical-rl; transform: rotate(180deg); z-index: 2; } .content { top: 10vh; height: 100%; } .content__item { padding: calc(10vh + 2em) 0 7vh; width: 50.5%; max-width: 800px; left: 42vw; overflow: visible; } .content__close { left: 42vw; top: calc(10vh + 1em); } .content__number { position: absolute; bottom: 0; right: 0; font-size: 0.6em; } .content__title { margin-top: 1em; font-size: 1.3em; } .content__subtitle { margin-bottom: 5.5vh; font-weight: normal; font-size: 1.255em; min-height: 50px; text-align: justify; } .content__subtitle span { font-size: 0.6em; opacity: 0.7; } .content__text { font-size: 0.95em; -moz-column-count: 2; column-count: 2; -moz-column-gap: 2em; column-gap: 2em; text-align: justify; } .fa, .dp, .tel { background-color: transparent; height: 100vh; width: 100%; margin-left: 0; } .fa object, .dp object, .tel object { width: 100%; height: 57vh; margin-left: 50%; transform: translateX(-50%); margin-top: -50px; } .fa, .dp, .prix, .tel { font-weight: bold; font-size: 1.2em; -moz-column-count: 1; column-count: 1; -moz-column-gap: 0; column-gap: 0; max-width: 600px; text-align: left; } .fa span, .dp span, .prix span, .tel span { font-weight: normal; } .extrait { margin-top: -50px; font-style: italic; font-weight: normal; -moz-column-count: 1; column-count: 1; font-size: 1.2em; -moz-column-gap: 0; column-gap: 0; max-width: 600px; text-align: justify; line-height: 1.5; } .fa object { width: 55vw; height: 30vh; } .tel object { width: 100% !important; height: 60vh !important; } } .phone { color: transparent; text-shadow: none; } @-webkit-keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5, 0.5, 1); } } @keyframes loaderAnim { to { opacity: 1; transform: scale3d(0.5, 0.5, 1); } } </style> </head> <body class="loading"> <svg class="hidden"> <symbol id="icon-arrow" viewbox="0 0 24 24"> <title>arrow</title> <polygon points="6.3,12.8 20.9,12.8 20.9,11.2 6.3,11.2 10.2,7.2 9,6 3.1,12 9,18 10.2,16.8 "></polygon> </symbol> <symbol id="icon-drop" viewbox="0 0 24 24"> <title>drop</title> <path d="M12,21c-3.6,0-6.6-3-6.6-6.6C5.4,11,10.8,4,11.4,3.2C11.6,3.1,11.8,3,12,3s0.4,0.1,0.6,0.3c0.6,0.8,6.1,7.8,6.1,11.2C18.6,18.1,15.6,21,12,21zM12,4.8c-1.8,2.4-5.2,7.4-5.2,9.6c0,2.9,2.3,5.2,5.2,5.2s5.2-2.3,5.2-5.2C17.2,12.2,13.8,7.3,12,4.8z"></path> <path d="M12,18.2c-0.4,0-0.7-0.3-0.7-0.7s0.3-0.7,0.7-0.7c1.3,0,2.4-1.1,2.4-2.4c0-0.4,0.3-0.7,0.7-0.7c0.4,0,0.7,0.3,0.7,0.7C15.8,16.5,14.1,18.2,12,18.2z"></path> </symbol> <symbol id="icon-longarrow" viewbox="0 0 800 800"> <title>retour</title> <polygon fill="orangered" fill-rule="nonzero" points="0 0 0 800 800 800"></polygon> </symbol> <symbol id="icon-navarrow" viewbox="0 0 400 400"> <title>navarrow</title> <polygon fill="orangered" fill-rule="nonzero" points="400 0 0 400 400 400"></polygon> </symbol> </svg> <main> <div class="frame"> <header class="header"> <h1 class="header__title">World's on Fire?</h1> </header> </div> <div class="slideshow"> <div class="slideshow__deco"></div> <!--/1 CONJURER LA PEUR--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90);background-position:26% top;"></div> </div> <div class="slide__side">A film of urgency, community, righteous anger, and grace (Andréa Picard)</div> <div class="slide__title-wrap"><span class="slide__number">UN FILM SOUTENU PAR L'ACOR</span> <h3 class="slide__title acor--title">CONJURER LA PEUR </h3> <h4 class="slide__subtitle">par Raphaël Nieuwjaer <span>© ACOR, 2018</span></h4> </div> </div> <!--/2 FICHE TECHNIQUE--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90);background-position:36% bottom;"></div> </div> <div class="slide__side">Judy Hall is a name that will be on everyone’s lips (Maria Garcia)</div> <div class="slide__title-wrap"><span class="slide__number">FICHE TECHNIQUE</span> <h3 class="slide__title">Sortie nationale ▹ 05 décembre 2018</h3> <h4 class="slide__subtitle">Distributeur ▹ Shellac</h4> </div> </div> <!--/3 SYNOPSIS--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90);background-position:50% bottom;"></div> </div> <div class="slide__side">Un regard puissamment cinématographique et troublant de beauté (FIF La Roche/Yon)</div> <div class="slide__title-wrap"><span class="slide__number">SYNOPSIS</span> <h3 class="slide__title">Un an après la mort d’Alton Sterling,</h3> <h4 class="slide__subtitle">une chronique de la communauté Afro-américaine de Baton Rouge en Louisiane, durant l’été 2017, quand une série de meurtres violents agite le pays.</h4> </div> </div> <!--/ 4--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90);background-position:59% 50%;"></div> </div> <div class="slide__side">Une œuvre intelligente, pudique et émouvante (Boustoune, anglesdevue.com)</div> <div class="slide__title-wrap"><span class="slide__number">FESTIVALS, PRIX</span> <h3 class="slide__title"> </h3> <h4 class="slide__subtitle gold"> </h4> </div> </div> <!--/5--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img bg--5"></div> </div> <div class="slide__side">Roberto Minervini’s Doc Poetically Explores Life in the Deep South (Indie Wire)</div> <div class="slide__title-wrap"><span class="slide__number">FILM ANNONCE</span> <h3 class="slide__title"> </h3> <h4 class="slide__subtitle"> <span>© Shellac, 2018</span></h4> </div> </div> <!--/6--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90);background-position:47% top;"></div> </div> <div class="slide__side">Un magnifique portrait intime et collectif (Forum des images) </div> <div class="slide__title-wrap"><span class="slide__number">DOSSIER DE PRESSE</span> <h3 class="slide__title"> </h3> <h4 class="slide__subtitle"> <span>© Shellac, 2018</span></h4> </div> </div> <!--/7--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90);background-position:47% top;"></div> </div> <div class="slide__side">Une œuvre qui abolit les frontières (Le Monde) </div> <div class="slide__title-wrap"><span class="slide__number">TÉLÉCHARGEMENTS</span> <h3 class="slide__title"> </h3> <h4 class="slide__subtitle"> </h4> </div> </div> <!--/8--> <div class="slide"> <div class="slide__img-wrap"> <div class="slide__img" style="background-image: url(//repo.bfw.wiki/bfwrepo/image/62ff4595bb4f3.png?x-oss-process=image/auto-orient,1/resize,m_fill,w_770,h_420,/quality,q_90);background-position:29% 50%;"></div> </div> <div class="slide__side cit">You’re still young. They won’t shoot you. You still have time to fight.</div> <div class="slide__title-wrap"><span class="slide__number">CONTACTS</span> <h3 class="slide__title"> </h3> <h4 class="slide__subtitle"> </h4> </div> </div> <button class="nav nav--prev"> <svg class="icon icon--navarrow-prev"> <use xlink:href="#icon-navarrow"></use> </svg> </button> <button class="nav nav--next"> <svg class="icon icon--navarrow-next"> <use xlink:href="#icon-navarrow"></use> </svg> </button> </div> <div class="content"> <!--/1--> <div class="content__item"><span class="content__number">UN FILM SOUTENU PAR L'ACOR</span> <h3 class="content__title"> <br/>CONJURER LA PEUR</h3> <h4 class="content__subtitle gold">par Raphaël Nieujwar <span>© ACOR, 2018</span></h4> <div class="content__text extrait"> <span>Avant d'être le produit de relations effectives, la communauté apparaît comme le fruit d'une réverbération affective. D'où le paradoxe du film : il noue les scènes à partir de ce qui divise, isole, empêche, et ce faisant laisse entrevoir autant la fragmentation sociale que les possibilités rédemptrices du partage et de l'alliance.</span><br/><br/> <div class="link"> <a class="gold" href="h">Lire la suite…</a></div><br/> <div class="link"> <a class="gold" href="">Biographie de Raphaël Nieuwjaer</a></div> </div> <div class="content__contact"></div> </div> <!--/2--> <div class="content__item"><span class="content__number">FICHE TECHNIQUE</span><br/><br/><br/> <h3 class="content__title">Sortie nationale ▹ 05 décembre 2018</h3> <h4 class="content__subtitle">Documentaire • N&B • USA / Italie / France • 2018 • 2H03 • Shellac • Visa 149799 • Avec Judy Hill, Dorothy Hill, Michael Nelson, Ronaldo King, Titus Turner, Ashlei King, Kevin Goodman, <em>The New Black Panther Party For Self Defense</em></h4> <div class="content__text"><br/><br/><br/><br/><br/></div> <div class="content__contact"><span class="right"></span></div> </div> <!--/3--> <div class="content__item"><span class="content__number">SYNOPSIS </span> <h3 class="content__title">Une réflexion sur la question raciale.</h3> <h4 class="content__subtitle gold">Un portait intime de celles et ceux qui luttent pour la justice, la dignité et la survie dans un pays qui les maintient à la marge.</h4> <div class="content__text">Été 2017. Plusieurs jeunes hommes afro-américains sont violemment abattus par la police, une série de meurtres qui répand une onde de choc dans tout le pays.<br/><br/>Une communauté noire du Sud des États-Unis tente de vivre malgré les effets tenaces de l’histoire et de faire sa place dans un pays où elle n’en a pas.<br/><br/>En parallèle, les <em>Black Panthers </em>préparent une grande manifestation contre les violences policières.<br/><br/>Une réflexion foudroyante sur le racisme aux États-Unis, par le réalisateur de <em>The Other Side.</em></div> <div class="content__contact"></div> </div> <!--/4--> <div class="content__item"><span class="content__number">FESTIVALS, PRIX</span> <h3 class="content__title"> </h3> <h4 class="content__subtitle"> </h4> <div class="content__text prix">75<sup>e</sup> MOSTRA de VENISE <br/>compétition officielle <br/><span class="gold">Prix UNICEF</span><br/><br/>BFI LONDON Film Festival 2018<br/><span class="gold">Prix Best Documentary</span><br/><br/>Festival d'AUCH <br/><br/>9<sup>e</sup> FIF LA ROCHE-SUR-YON <br/>compétition internationale <br/><span class="gold">Grand Prix du Jury international Ciné +</span.........完整代码请登录后点击上方下载按钮下载查看
网友评论0