個人事業主（インボイス登録事業者）／広告会社勤務時代にディレクションを含む広告制作20年以上経験。フリーランスとなりHP企画デザイン構築まで請け負い15年以上の経験実績。近年はモール集約型のECから、次世代の可能性を確信し「独自ECサイト企画構築」を中心に顧客様の国・県の補助金申請まで実績があります。※只今本人確認申請中
wordpress bxslider ムービー対応 サイト構築・ウェブ開発の仕事の依頼
仕事の概要
|
固定報酬制
|
ワーカーと相談する
|
|---|---|
|
納品完了日
|
2019年04月11日 |
|
掲載日
|
2019年04月09日 |
|
応募期限
|
2019年04月09日 |
応募状況
| 応募した人 | 4 人 |
|---|---|
| 契約した人 | 0 人 |
| 募集人数 | 1 人 |
| 気になる！リスト | 1 人 |
仕事の詳細
|
【 概要 】 wordpress bxslider ムービー対応 【 依頼内容 】 web制作をしております 現サイトのトップページ、bxslider内にムービーを埋め込んでいますが autoplay、レシポンシブ object-fit:cover が IE関連で実現できず困っています。 （chrome,safari,などは実現できています） ぜひお力添えお願い致します。 【現サイトのトップページ】 http://www.tecraft.co.jp/tecraft2019/ chromeなどでご確認ください 【現在の使用コード】 【HTML】-------------------------------------------------------- <div class=""> <ul class=""> <li><video autoplay id="video" src="<?php bloginfo('template_directory'); ?>/img/tc4.mp4" muted ></video></li> <li><div class=""><h1>For the next generation.<br/><span>techno craft</span></h1></div><img src="<?php bloginfo('template_directory'); ?>/img/movie.jpeg" alt=""></li> </ul> </div> ※object-fit:coverをieに対応させるため fitie.jsを読み込み 【bxsliderのscript】-------------------------------------------------------- $(function() { var $video = $('#video').get(0); $slider = $('.bxslider_top').bxSlider({ mode: 'fade', pager: false, controls: false, infiniteLoop: true, onSliderLoad : function() { $video.play(); }, onSlideAfter: function($slideElement, oldIndex, newIndex) { if ( newIndex == 0 ){ $video.play(); } else { $video.pause(); $video.currentTime = 0; $slider.startAuto(); } } }); $video.addEventListener("play", function() { $slider.stopAuto(); }); $video.addEventListener("ended", function() { $slider.goToNextSlide(); }); }); 【css】-------------------------------------------------------- .movie { margin-top: 120px; width: 100%; height: 640px; overflow: hidden; } .movie img { width: 100%; height: 640px; object-fit: cover; } .bxslider_top { width: 100%; margin: 0px; padding: 0px; } .movie ul { position: relative; width: 100%; } .movie .bx-wrapper { margin-left: 0px !important; } video { min-width: 100%; min-width: 100vw; height: 640px; object-fit: cover; } .site-title h1 { font-family: 'helvetica_neue_condbold'; font-weight: normal; font-style: normal; letter-spacing: 1px; font-size: 400% !important; line-height: 1em; text-align: center; position: absolute; top: 50%; left: 50%; -webkit-transform: translate(-50%, -50%); -moz-transform: translate(-50%, -50%); -ms-transform: translate(-50%, -50%); -o-transform: translate(-50%, -50%); transform: translate(-50%, -50%); } .site-title h1 span { font-size: 70% !important; } 【 納期 】 相談して決めたい こちらのメッセージなどにサクッとコードを 送っていただければ、すぐテストして見ます 【 報酬 】 相談して決めたい 【 応募方法 】 ほぼ問題なく解決出来そうなエンジニアの方 条件提示にてお見積もり金額をお願い致します |
| 特記事項 |
|---|
|
|
クライアント情報
最近応募したクラウドワーカー
| クラウドワーカー | 応募日時 |
|---|---|
nakamura777
|
2019/04/09 22:06 |
Apollo Dream
|
2019/04/09 21:57 |
alkit131
|
2019/04/09 20:39 |
ninja-dev
|
2019/04/09 10:06 |
