.aaa.hover { background:#000; }
すでに:hoverをつけている場合は:hoverを.hoverに変えれば良いです。
$('.aaa').on('touchstart mouseenter', function(){
$(this).addClass( 'hover' );
}).on('touchend mouseleave', function(){
$(this).removeClass( 'hover' );
});
以上でスマホでもPCと変わらず意図したhover効果をつけることができます。
<select name="お問い合せ項目(必須)"> <option value="" disabled="disabled" selected class="contact_not_selected">お問い合せ項目を選択してください。</option> <option value="お買い上げの商品について">お買い上げの商品について</option> <option value="お探しの商品について">お探しの商品について</option> <option value="その他">その他</option> </select>① 選択前のoptionに任意のクラス名（ここではcontact_not_selected）をつけます。
$(function(){
function selectColor() {
// 現在選択されてる項目によって色設定
if($('select').find('option:selected').hasClass('contact_not_selected')) {
$('select').css({'color': '#e6e6e6'});
}
// 項目が変更された時、条件によって色変更
$('select').on('change', function(){
if($(this).find('option:selected').hasClass('contact_not_selected')) {
$(this).css({'color': '#e6e6e6'});
} else {
$(this).css({'color': '#000'});
}
});
}
selectColor();
});
Google jsのAPIキー発行する方法
<script src="https://maps.googleapis.com/maps/api/js?key=◯◯◯"></script>①で取得したApiキーを◯◯◯の部分に入れます。
<div id="map-canvas"></div>マップを表示したい箇所に入れます。idの名前は任意のもので問題ありませんが、この後紹介するJavascriptのコードのなかでmap-canvasと書かれている箇所も変更してください。
#map-canvas { width:400px; height:400px; }
③でいれたdivにスタイルをつけます。
上の例だと400×400pxのdivの中にGoogle Mapが表示されます。
<script>
var map;
var osaka = new google.maps.LatLng(34.689472, 135.499019);
var MY_MAPTYPE_ID = 'Pandy_style';
function initialize() {
var featureOpts = [
{
"stylers":[
{ "hue": "#1c95ff" },
{ "saturation": -80 }
],
"elementType": "all", "featureType": "all"
}
]
var mapOptions = {
zoom: 17,
center: osaka,
mapTypeControlOptions: {
mapTypeIds: [
google.maps.MapTypeId.ROADMAP, MY_MAPTYPE_ID]
},
mapTypeId: MY_MAPTYPE_ID
};
map = new google.maps.Map(document.getElementById('map-canvas'), mapOptions);
var image = '../images/pin.png';
var marker = new google.maps.Marker({
position: osaka,
map: map,
icon:image,
title: 'LUSIC株式会社 (ルーシック)'
});
var styledMapOptions = {
name: 'LUSIC株式会社 (ルーシック)'
};
var customMapType = new google.maps.StyledMapType(featureOpts, styledMapOptions
);
map.mapTypes.set(MY_MAPTYPE_ID, customMapType);
}
</script>
google.maps.event.addDomListener(window, 'load', initialize);
上のJavascriptのコードはLUSICさんのものをコピペしたものです。実際に使用する際は過去のサイトのものをコピペして作業をすると楽です。head内に書いてもいいですし、外部ファイルに書いてhead内で読み込んでも動きます。上から順にカスタマイズする場所を説明します。
var osaka = new google.maps.LatLng(34.689472, 135.499019);new google.maps.LatLngのカッコの中に表示させたい地点の座標をいれます。osakaは他の名前でも問題ありませんが、コードのなかでosakaと書かれている場所の名前も変更してください。
"hue": "#1c95ff"“#1c95ff”にサイトの雰囲気に合った色を入れて下さい。
"saturation": -80「-80」が入っている箇所の数値が高いほど鮮やかに、数値が低いほどくすんだ色になります。
zoom: 17「17」が入っている箇所を変更することで表示する地図の縮尺を変更することができます。1〜21まで設定でき、数値が大きいほど拡大されて表示されます。
var image = '../images/pin.png';
icon:image,‘../images/pin.png’を変更すると、目的の場所を示すピンを作成した画像などに変更することができます。デフォルトでいい場合は２つとも削除してください。
title: 'LUSIC株式会社 (ルーシック)'
name: 'LUSIC株式会社 (ルーシック)'こちらは使用する会社の名前などに変更してください。 設定は以上になります。
$(function(){
$(window).on('scroll',function(){
var scrollPosition = $('.aaa').offset().top - $(window).height();
if($(window).scrollTop() > scrollPosition + 300){
$('.aaa').stop().fadeIn(700);
}
});
});
<link rel="stylesheet" href="css/animate/animate.css">
<script src="js/wow/wow.js"></script>
<script> new WOW().init(); </script>animate.cssはそのままでいいのですが、wow.jsは上記のように記述する必要があります。
<div class="aaa wow fadeIn"></div>アニメーションさせたい要素のCLASS名に「wow」と「（アニメーション名）」を追加します。
<p class="anime_img_1 wow fadeInUp" data-wow-duration="2s" data-wow-offset="200"><img src="images/1.jpg" ></p>このように書くと、要素に達してからさらに200pxスクロールした時に、下から浮かび上がるように要素が2秒かけて出てきます。