wapo-logo.html

---
layout: post
title:  ""
type: ""
date:   2013-10-19 17:00:00
---
<style>
.file {
  position: relative;
	  display: inline-block;
		  cursor: pointer;
			  height: 1rem;
				}
				.file input {
				  min-width: 14rem;
					  margin: 0;
						  filter: alpha(opacity=0);
							  opacity: 0;
								}
								.file:after {
								  position: absolute;
									  top: 0;
										  right: 0;
											  left: 0;
												  z-index: 5;
													  content: "Choose file...";
														  height: 1rem;
															  padding: .5rem 1rem;
																  line-height: 1;
																	  color: #555;
																		  background-color: #fff;
																			  border: .075rem solid #ddd;
																				  border-radius: .25rem;
																					  box-shadow: inset 0 .2rem .4rem rgba(0,0,0,.05);
																						}
																						.file:before {
																						  position: absolute;
																							  top: 0;
																								  right: 0;
																									  bottom: 0;
																										  z-index: 6;
																											  display: block;
																												  content: "Browse";
																													  height: 1rem;
																														  padding: .5rem 1rem;
																															  line-height: 1;
																																  color: #555;
																																	  background-color: #eee;
																																		  border: .075rem solid #ddd;
																																			  border-radius: 0 .25rem .25rem 0;
																																				}

																																				svg {
																																					position: absolute;
																																					top: 4em;
																																					left: 25%;
																																				}
																																</style>	

				<label class="file">
								  <input type="file">
					</label>
<svg xmlns="http://www.w3.org/2000/svg" xmlns:xlink="http://www.w3.org/1999/xlink" xmlns:ev="http://www.w3.org/2001/xml-events" version="1.1" baseProfile="full">
	<title>Text Pattern Fill Example</title>
	    <defs>
						<pattern id="image" patternUnits="userSpaceOnUse" width="2000px" height="2000px" x="0" y="0">
				 	    <image xlink:href="/img/monuments/panda.jpg" x="0" y="0" width="1500" height="900" preserveAspectRatio="xMinYMin meet"/>
						</pattern>
						<path id="shape" d="M163.515888,346.21426 L111.621532,404.977291 L41.1233536,344.255912 L41.1233536,248.276575 L27.4176698,248.276575 C15.1768759,248.276575 9.30121077,255.620378 7.34335597,265.414917 L2.4473185,265.414917 C1.46909133,261.499622 0,254.643305 0,246.809215 C0,234.075754 5.38620141,200.777543 41.1233536,200.777543 L41.1233536,126.340027 C41.1233536,97.4494993 22.0314684,95.9814391 22.0314684,71.0055048 C22.0314684,43.0948509 48.4660094,17.138342 96.9334192,0 L101.342094,3.91879617 C85.1862904,11.7535869 71.9665691,21.5474254 71.9665691,42.605264 C71.9665691,74.9236005 103.298548,66.599223 103.298548,117.527464 L103.298548,137.11444 L160.577005,76.8812476 L220.796445,136.135967 L277.589639,76.8812476 L332.417276,130.74771 L332.417276,311.935475 L231.568148,404.977291 L163.515888,346.21426 Z M160.088241,160.620914 L125.82018,126.829614 L103.298548,149.8451 L103.298548,317.811918 L144.912766,353.558763 L160.088241,336.419721 L160.088241,160.620914 L160.088241,160.620914 Z M270.737148,154.254884 L243.321578,126.829614 L222.264136,147.888153 L222.264136,317.324432 L270.242082,359.435907 L270.737848,358.94632 L270.737848,154.254884 L270.737148,154.254884 Z M512.080564,404.977291 C503.75408,394.692465 493.477443,385.881302 481.235948,382.454895 L481.235948,484.310676 L480.258422,484.798161 L453.329515,459.821527 L396.537021,512.222731 L395.559494,511.734544 L395.559494,380.009062 C378.423363,383.924356 359.823042,394.693166 345.624393,412.327398 L341.707984,409.880865 C345.13423,372.170068 363.742953,344.256613 395.558794,333.483601 L395.558794,237.99385 L385.282157,237.99385 C371.084909,237.99385 361.290033,247.786287 359.332878,258.558599 L353.459314,258.558599 C351.985321,254.642605 350.026066,248.275874 350.026066,236.0327 C350.026066,212.037341 366.190972,193.919825 392.622012,193.919825 L395.558094,193.919825 L395.558094,141.031135 L377.933899,125.360854 L364.231717,139.074189 L357.374323,132.707458 L411.713197,76.881948 L457.733988,118.998326 L457.733988,166.987644 L471.931937,151.806949 L471.931937,95.4904514 L481.235948,95.4904514 L481.235948,142.009609 L542.433616,76.881948 L597.751417,127.322703 L597.751417,340.339918 L512.080564,404.977291 Z M471.932637,161.111902 L457.734689,175.802309 L457.734689,451.49925 L471.932637,464.722999 L471.932637,161.111902 L471.932637,161.111902 Z M536.067787,149.8458 L507.187328,123.403907 L481.235948,150.828476 L481.235948,328.585631 C504.242843,331.525953 521.378274,339.362145 535.576923,354.541439 L536.067787,354.053253 L536.067787,149.8458 L536.067787,149.8458 Z" />
	    </defs>
			<use xlink:href="#shape" fill="url(#image)"></use>
</svg>


<script src="{{ root_path }}js/jquery.js"></script>
<script type="text/javascript">
$(function() {
	var image = document.getElementById('image');

	console.log(image.x.animVal.value);

	// get mouse position
    var mouseX = 0;
    var mouseY = 0;
		var windowWidth = $(window).width();

	$('body').mousemove(function(e) {
					console.log(windowWidth)
		mouseX = - e.pageX/windowWidth * 50;
    mouseY = - e.pageY/windowWidth * 100;

		image.setAttribute("x", mouseX + '%');
		image.setAttribute("y", mouseY + '%');

});
	
});	
</script>