516 lines
30 KiB
HTML
516 lines
30 KiB
HTML
<!DOCTYPE html>
|
|
<html lang="fr">
|
|
|
|
<head>
|
|
|
|
<meta charset="utf-8">
|
|
<meta name="viewport" content="width=device-width, initial-scale=1, shrink-to-fit=no">
|
|
<meta name="description" content="Welcome, my name is Max SPIEGEL. I'm a CGI/VFX artist at your service. 2D/3D Animation, Compositing, Authoring Blu-Ray, Sculpting 3D.">
|
|
<meta name="author" content="Max SPIEGEL, Paul TREHIOU">
|
|
<meta name="google-site-verification" content="hA8zslIULO9eYfwLMGrvy-O9H0beEKK6JirwLOto2H4" />
|
|
|
|
<title>Max SPIEGEL - CG Artist</title>
|
|
|
|
<link rel="icon" type="image/jpg" href="img/favicon.jpg" />
|
|
|
|
<!-- Bootstrap core CSS -->
|
|
<link href="vendor/bootstrap/css/bootstrap.min.css" rel="stylesheet">
|
|
|
|
<!-- Custom fonts for this template -->
|
|
<link href="vendor/font-awesome/css/all.min.css" rel="stylesheet" type="text/css">
|
|
<link href='https://fonts.googleapis.com/css?family=Open+Sans:300italic,400italic,600italic,700italic,800italic,400,300,600,700,800' rel='stylesheet' type='text/css'>
|
|
<link href='https://fonts.googleapis.com/css?family=Merriweather:400,300,300italic,400italic,700,700italic,900,900italic' rel='stylesheet' type='text/css'>
|
|
|
|
<!-- Plugin CSS -->
|
|
<link href="vendor/magnific-popup/magnific-popup.css" rel="stylesheet">
|
|
|
|
<!-- Custom styles for this template -->
|
|
<link href="css/creative.css" rel="stylesheet">
|
|
|
|
</head>
|
|
|
|
<body id="page-top">
|
|
|
|
<!-- Navigation -->
|
|
<nav class="navbar fixed-top navbar-expand-lg navbar-light" id="mainNav">
|
|
<a class="navbar-brand" href="#page-top">Max Spiegel<small> - CG Artist</small></a>
|
|
|
|
<button class="navbar-toggler navbar-toggler-right" type="button" data-toggle="collapse" data-target="#navbarMain" aria-controls="navbarMain" aria-expanded="false" aria-label="Toggle navigation">
|
|
<span class="navbar-toggler-icon"></span>
|
|
</button>
|
|
|
|
<div class="collapse navbar-collapse" id="navbarMain">
|
|
<ul class="navbar-nav ml-auto">
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#about">Portfolio</a>
|
|
</li>
|
|
<li class="nav-item">
|
|
<a class="nav-link" href="#contact">Contact</a>
|
|
</li>
|
|
</ul>
|
|
</div>
|
|
</nav>
|
|
|
|
<header class="masthead">
|
|
<div class="video-container">
|
|
<div id="player"></div>
|
|
</div>
|
|
|
|
<a class="master_button" href="#about">
|
|
<i class="fa fa-angle-down fa-2x" aria-hidden="true"></i>
|
|
</a>
|
|
|
|
<a id="video-sound" class="master_button" href="#">
|
|
<img class="icone icone-son" aria-hidden="true" src="vector/sound-off.svg">
|
|
</a>
|
|
|
|
<a id="vimeo-link" class="master_button" href="https://vimeo.com/user59930690">
|
|
<i class="fab fa-vimeo-v fa-2x" aria-hidden="true"></i>
|
|
</a>
|
|
|
|
<a id="artstation-link" class="master_button" href="https://www.artstation.com/maxspiegel">
|
|
<i class="fab fa-artstation fa-2x" aria-hidden="true"></i>
|
|
</a>
|
|
</header>
|
|
|
|
<section class="bg-primary" id="about">
|
|
<img id="renard" src="img/whitfoxvecto.svg">
|
|
<hr id="hr_left" />
|
|
<hr id="hr_right" />
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-8 text-center">
|
|
<h1 class="section-heading text-white">Portfolio</h1>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="portfolio">
|
|
<div class="d-flex flex-wrap">
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311415375?autoplay=1&loop=1&autopause=0" data-comment="My favorite project of 2018. Two creatures in a snowy landscape. Made during the last two weeks of December 2018.">
|
|
<video loop muted poster="img/portfolio/flo.jpg">
|
|
<source src="video/portfolio/flo.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311415149?autoplay=1&loop=1&autopause=0" data-comment="I created a rigged fox and a snake, I used Xgen for the fur. This project taked the first two weeks of December 2018.">
|
|
<video loop muted poster="img/portfolio/an.jpg">
|
|
<source src="video/portfolio/an.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414971?autoplay=1&loop=1&autopause=0" data-comment="Made during the last two weeks of November 2018. Inspired by Ghost in the Shell and Cowboy Bebop.">
|
|
<video loop muted poster="img/portfolio/out.jpg">
|
|
<source src="video/portfolio/out.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414804?autoplay=1&loop=1&autopause=0" data-comment="Released at the end of the first two weeks of November 2018 showing an animal character in an Italian city.">
|
|
<video loop muted poster="img/portfolio/venise.jpg">
|
|
<source src="video/portfolio/venise.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414675?autoplay=1&loop=1&autopause=0" data-comment="Created during the last two weeks of October 2018 showing a character in a mountain landscape.">
|
|
<video loop muted poster="img/portfolio/girl.jpg">
|
|
<source src="video/portfolio/girl.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="311414306?autoplay=1&loop=1&autopause=0" data-comment="Project created during the first two weeks of October 2018 showing a small robot walking in a windy forest.">
|
|
<video loop muted poster="img/portfolio/roy2.jpg">
|
|
<source src="video/portfolio/roy2.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="348853315" data-comment="An other video for the music group PVLSAR, a teaser this time. I created several rigged robots who fight on their motor bikes. Made with Cinema 4D, the renderer Redshift and After Effects." data-artstationid="w848YO" data-artstationtext="See more details of this teaser on ArtStation">
|
|
<video loop muted poster="img/portfolio/wo.jpg">
|
|
<source src="video/portfolio/wo.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-youtubeid="74qqbfkdnrM" data-comment="This is my video for the music group PVLSAR. I spent two weeks doing it with Cinema 4D and After Effects." data-artstationid="2xQJlB" data-artstationtext="See the project on ArtStation">
|
|
<video loop muted poster="img/portfolio/thund.jpg">
|
|
<source src="video/portfolio/thund.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802506?autoplay=1&loop=1&autopause=0" data-comment="My lanterns. Made with Cinema 4D and Redshift." data-artstationid="OyR0XJ" data-artstationtext="See more details on ArtStation">
|
|
<video loop muted poster="img/portfolio/lant.jpg">
|
|
<source src="video/portfolio/lant.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802458?autoplay=1&loop=1&autopause=0" data-comment="Jupiter in the mist." data-artstationid="nQO0d4" data-artstationtext="See more details on ArtStation">
|
|
<video loop muted poster="img/portfolio/mist.jpg">
|
|
<source src="video/portfolio/mist.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802401?autoplay=1&loop=1&autopause=0" data-comment="This key can open all the treasures." data-artstationid="rRd8d2" data-artstationtext="See the project on ArtStation">
|
|
<video loop muted poster="img/portfolio/hand.jpg">
|
|
<source src="video/portfolio/hand.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287796820?autoplay=1&loop=1&autopause=0" data-comment="An Orange guitar amp followed by a Voronoi Fracture animation." data-artstationid="nQO1wO" data-artstationtext="More details on ArtStation">
|
|
<video loop muted poster="img/portfolio/amp.jpg">
|
|
<source src="video/portfolio/amp.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802323?autoplay=1&loop=1&autopause=0" data-comment="For this one I wanted to mix cloner and gravity." data-artstationid="dOR9XJ" data-artstationtext="More details on ArtStation">
|
|
<video loop muted poster="img/portfolio/candle.jpg">
|
|
<source src="video/portfolio/candle.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802590?autoplay=1&loop=1&autopause=0" data-comment="An advertisement for a watch.">
|
|
<video loop muted poster="img/portfolio/watch.jpg">
|
|
<source src="video/portfolio/watch.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802537?autoplay=1&loop=1&autopause=0" data-comment="When a train leaves the earth..." data-artstationid="xzKzvX" data-artstationtext="More details on ArtStation">
|
|
<video loop muted poster="img/portfolio/loco.jpg">
|
|
<source src="video/portfolio/loco.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802445?autoplay=1&loop=1&autopause=0" data-comment="An interior modeling." data-artstationid="Yaow0V" data-artstationtext="More details on ArtStation">
|
|
<video loop muted poster="img/portfolio/home.jpg">
|
|
<source src="video/portfolio/home.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802488?autoplay=1&loop=1&autopause=0" data-comment="A mountain view. Made with Forester and Redshift Proxies." data-artstationid="aR6a09" data-artstationtext="More details on ArtStation">
|
|
<video loop muted poster="img/portfolio/land.jpg">
|
|
<source src="video/portfolio/land.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802425?autoplay=1&loop=1&autopause=0" data-comment="Hotel in the dark." data-artstationid="XBY8oa" data-artstationtext="See the project on ArtStation">
|
|
<video loop muted poster="img/portfolio/hotel.jpg">
|
|
<source src="video/portfolio/host.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802572?autoplay=1&loop=1&autopause=0" data-comment="A temple in the forest." data-artstationid="PmBZl8" data-artstationtext="The project on ArtStation">
|
|
<video loop muted poster="img/portfolio/tmp.jpg">
|
|
<source src="video/portfolio/temple.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802555?autoplay=1&loop=1&autopause=0" data-comment="An example of soda advertising. I used Realflow for the liquid animation.">
|
|
<video loop muted poster="img/portfolio/tea.jpg">
|
|
<source src="video/portfolio/tea.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802354?autoplay=1&loop=1&autopause=0" data-comment="Inside. Made with Cinema 4D and Arnold." data-artstationid="58oO5P" data-artstationtext="See the project on ArtStation">
|
|
<video loop muted poster="img/portfolio/fen.jpg">
|
|
<source src="video/portfolio/fen.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802369?autoplay=1&loop=1&autopause=0" data-comment="Made with Cinema 4D, Turbulence FD and Redshift." data-artstationid="XB20nl" data-artstationtext="See more details on ArtStation">
|
|
<video loop muted poster="img/portfolio/final.jpg">
|
|
<source src="video/portfolio/final.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="287802346?autoplay=1&loop=1&autopause=0" data-comment="The moon keeps a close look on the city.">
|
|
<video loop muted poster="img/portfolio/eye.jpg">
|
|
<source src="video/portfolio/eye.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="282742025" data-comment="This is the story of a special mushroom who will, during some adventures, meet an old friend again. Released in 2017." data-artstationid="RYBKxm" data-artstationtext="See more details of this short film on ArtStation">
|
|
<video loop muted poster="img/portfolio/mush.jpg">
|
|
<source src="video/portfolio/champi.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="282034965" data-comment="Here is my graduation film at Ecole Supérieure de l'AudioVisuel (ESAV). Seven days before my defense, I was burglarized and I made this alternative ending in three days. Released in June 2017.">
|
|
<video loop muted poster="img/portfolio/roy.jpg">
|
|
<source src="video/portfolio/roy.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#carouselSculptingModal">
|
|
<video loop muted poster="img/portfolio/st.jpg">
|
|
<source src="video/portfolio/st.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="195989917" data-comment="Movie opening exercise for a meeting with GOBELINS's students. I composed the music.">
|
|
<video loop muted poster="img/portfolio/pomp.jpg">
|
|
<source src="video/portfolio/pomp.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
<div class="element-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-sketchfabid="7507e61126754169937a24858981b185">
|
|
<div class="portfolio-container">
|
|
<img class="dynamic-zoom" src="img/portfolio/Metal Carrot1.jpg" />
|
|
</div>
|
|
</div>
|
|
<div class="element-portfolio video-portfolio clickable col-lg-4 col-sm-6" data-toggle="modal" data-target="#iframeModal" data-vimeoid="202941724" data-comment="A painting by Santiago Rusiñol y Prat, animated with Clémentine Meriadec for the Goya Museum">
|
|
<video loop muted poster="img/portfolio/jar.jpg">
|
|
<source src="video/portfolio/jar.webm" type="video/webm">
|
|
</video>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<section id="contact">
|
|
<div class="container">
|
|
<div class="row justify-content-center">
|
|
<div class="col-8 text-center">
|
|
<h2 class="section-heading">Contact</h2>
|
|
<hr class="primary">
|
|
</div>
|
|
</div>
|
|
<div class="row justify-content-center">
|
|
<div class="col-lg-4 text-center">
|
|
<i class="fas fa-phone-alt fa-3x sr-contact"></i>
|
|
<p class="mt-2">0033 (0) 6 44 26 78 84</p>
|
|
</div>
|
|
<div class="col-lg-4 text-center">
|
|
<i class="fas fa-envelope fa-3x sr-contact"></i>
|
|
<p class="mt-2"><a href="mailto:spiegel.max1996@gmail.com">spiegel.max1996@gmail.com</a></p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</section>
|
|
|
|
<div class="modal fade" id="iframeModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div class="embed-responsive embed-responsive-16by9">
|
|
<iframe class="embed-responsive-item" src=""></iframe>
|
|
</div>
|
|
<div class="modal-comment">
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<div class="modal fade" id="carouselSculptingModal" tabindex="-1" role="dialog" aria-hidden="true">
|
|
<div class="modal-dialog modal-lg" role="document">
|
|
<div class="modal-content">
|
|
<div class="modal-header">
|
|
<button type="button" class="close" data-dismiss="modal" aria-label="Close">
|
|
<span aria-hidden="true">×</span>
|
|
</button>
|
|
</div>
|
|
<div class="modal-body">
|
|
<div id="carouselSculpting" class="carousel slide" data-ride="carousel">
|
|
<ol class="carousel-indicators">
|
|
<li data-target="#carouselSculpting" data-slide-to="0" class="active"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="1"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="2"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="3"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="4"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="5"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="6"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="7"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="8"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="9"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="10"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="11"></li>
|
|
<li data-target="#carouselSculpting" data-slide-to="12"></li>
|
|
</ol>
|
|
<div class="carousel-inner" role="listbox">
|
|
<div class="carousel-item active">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/1.jpg" alt="1">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/2.jpg" alt="2">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/3.jpg" alt="3">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/4.jpg" alt="4">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/5.jpg" alt="5">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/6.jpg" alt="6">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/7.jpg" alt="7">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/8.jpg" alt="8">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/9.jpg" alt="9">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/10.jpg" alt="10">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/11.jpg" alt="11">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/12.jpg" alt="12">
|
|
</div>
|
|
<div class="carousel-item">
|
|
<img class="d-block img-fluid" src="img/Carousel/stage/13.jpg" alt="13">
|
|
</div>
|
|
</div>
|
|
<a class="carousel-control-prev" role="button" data-slide="prev" data-target="#carouselSculpting">
|
|
<span class="carousel-control-prev-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Previous</span>
|
|
</a>
|
|
<a class="carousel-control-next" role="button" data-slide="next" data-target="#carouselSculpting">
|
|
<span class="carousel-control-next-icon" aria-hidden="true"></span>
|
|
<span class="sr-only">Next</span>
|
|
</a>
|
|
</div>
|
|
<div class="modal-comment">
|
|
<hr>
|
|
<p>Here is some images of 3D projects I did with a view to the creation of jewels for 2 Saints from the foundry Solyfonte.
|
|
</p>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
</div>
|
|
|
|
<!-- Bootstrap core JavaScript -->
|
|
<script src="vendor/jquery/jquery.min.js"></script>
|
|
<script src="vendor/tether/tether.min.js"></script>
|
|
<script src="vendor/popper/popper.min.js"></script>
|
|
<script src="vendor/bootstrap/js/bootstrap.min.js"></script>
|
|
|
|
<!-- Plugin JavaScript -->
|
|
<script src="vendor/jquery-easing/jquery.easing.min.js"></script>
|
|
<script src="vendor/scrollreveal/scrollreveal.min.js"></script>
|
|
<script src="vendor/magnific-popup/jquery.magnific-popup.min.js"></script>
|
|
|
|
<!-- Custom scripts for this template -->
|
|
<script src="js/creative.min.js"></script>
|
|
|
|
<script>
|
|
var video_button = document.getElementById("video-sound");
|
|
var fullscreen_button = document.getElementById("fullscreen-video");
|
|
|
|
var portfolio_videos = document.getElementsByClassName('video-portfolio');
|
|
|
|
for (video_div of portfolio_videos) {
|
|
video_div.onmouseover = function() {this.children[0].play()};
|
|
video_div.onmouseout = function() {this.children[0].load()};
|
|
}
|
|
|
|
|
|
$('#iframeModal').on('show.bs.modal', function (event) {
|
|
var modal = $(this);
|
|
var button = $(event.relatedTarget);
|
|
var iframe = modal.find('.modal-body iframe')[0];
|
|
|
|
var youtube_id = button.data('youtubeid');
|
|
var vimeo_id = button.data('vimeoid');
|
|
var sketchfab_id = button.data('sketchfabid');
|
|
var artstation_id = button.data('artstationid');
|
|
var artstation_text = button.data('artstationtext');
|
|
|
|
var comment = button.data('comment');
|
|
var options = button.data('options');
|
|
|
|
var url = "";
|
|
|
|
if (youtube_id) {
|
|
|
|
url = 'https://www.youtube.com/embed/' + youtube_id + "?modestbranding=1&rel=0&html5=1";
|
|
|
|
if (options) {
|
|
url += '&' + options;
|
|
}
|
|
|
|
iframe.setAttribute("allowfullscreen", "");
|
|
iframe.src = url;
|
|
|
|
} else if (vimeo_id) {
|
|
|
|
url = 'https://player.vimeo.com/video/' + vimeo_id;
|
|
|
|
iframe.setAttribute("allowfullscreen", "");
|
|
iframe.src = url;
|
|
|
|
} else if (sketchfab_id) {
|
|
|
|
url = 'https://sketchfab.com/models/' + sketchfab_id + '/embed?autostart=1';
|
|
|
|
iframe.setAttribute("allowfullscreen", "");
|
|
iframe.setAttribute("allowvr", "");
|
|
iframe.setAttribute("onmousewheel", "");
|
|
iframe.src = url;
|
|
|
|
}
|
|
|
|
var modal_comment = modal.find('.modal-body .modal-comment')[0];
|
|
|
|
if (comment || artstation_id) {
|
|
modal_comment.appendChild(document.createElement('hr'));
|
|
}
|
|
|
|
if (comment) {
|
|
var comment_object = document.createElement('p');
|
|
comment_object.innerText = comment;
|
|
modal_comment.appendChild(comment_object);
|
|
}
|
|
|
|
if (artstation_id) {
|
|
var artstation_link = document.createElement('a');
|
|
artstation_link.text = artstation_text;
|
|
artstation_link.href = "https://www.artstation.com/artwork/" + artstation_id;
|
|
modal_comment.appendChild(artstation_link);
|
|
}
|
|
});
|
|
|
|
$('#iframeModal').on('hidden.bs.modal', function () {
|
|
$(this).find('.modal-body iframe')[0].src = "";
|
|
$(this).find('.modal-body .modal-comment')[0].innerHTML = "";
|
|
});
|
|
|
|
var tag = document.createElement('script');
|
|
|
|
tag.src = "https://www.youtube.com/iframe_api";
|
|
var firstScriptTag = document.getElementsByTagName('script')[0];
|
|
firstScriptTag.parentNode.insertBefore(tag, firstScriptTag);
|
|
|
|
// 3. This function creates an <iframe> (and YouTube player)
|
|
// after the API code downloads.
|
|
var player;
|
|
function onYouTubeIframeAPIReady() {
|
|
player = new YT.Player('player', {
|
|
videoId: '-IH7vC_Kaj8',
|
|
playerVars: {
|
|
autoplay: 1,
|
|
controls: 0,
|
|
disablekb: 1,
|
|
loop: 1,
|
|
modestbranding: 1,
|
|
playlist: '-IH7vC_Kaj8',
|
|
rel: 0,
|
|
showinfo: 0
|
|
},
|
|
events: {
|
|
'onReady': onPlayerReady,
|
|
}
|
|
});
|
|
}
|
|
|
|
var iframe
|
|
|
|
function onPlayerReady(event) {
|
|
event.target.mute();
|
|
iframe = document.getElementById('player');
|
|
document.getElementById('video-sound').addEventListener('click', playMute);
|
|
}
|
|
|
|
function playMute(){
|
|
var video_button = document.getElementById('video-sound');
|
|
if(player.isMuted()){
|
|
player.unMute();
|
|
video_button.children[0].setAttribute("src", "vector/sound-on.svg");
|
|
} else {
|
|
player.mute();
|
|
video_button.children[0].setAttribute("src", "vector/sound-off.svg");
|
|
}
|
|
}
|
|
|
|
</script>
|
|
|
|
<footer>
|
|
<small>MANY thanks to Paul TREHIOU, inspired by <a href="https://startbootstrap.com/template-overviews/creative/">Creative</a> <a rel="license" href="http://creativecommons.org/licenses/by-nc-sa/4.0/"><img alt="Licence Creative Commons" style="border-width:0" src="https://i.creativecommons.org/l/by-nc-sa/4.0/80x15.png"></a></small>
|
|
</footer>
|
|
|
|
</body>
|
|
|
|
</html>
|